Большое спасибо Майку и Роберту за их полезные посты!
Если у вас есть два элемента в вашем HTML, и вы хотите :hover
более одного и нацелены на изменение стиля в другом, эти два элемента должны быть напрямую связаны - родители, дети или братья и сестры. Это означает, что оба элемента должны быть либо внутри другого, либо оба должны содержаться в одном и том же элементе большего размера.
Я хотел, чтобы определения отображались в рамке справа от браузера, когда мои пользователи читали мой сайт и пересекались с :hover
выделенными терминами; поэтому я не хотел, чтобы элемент 'definition' отображался внутри элемента 'text'.
Я почти сдался и просто добавил javascript на свою страницу, но это будущее, черт возьми! Нам не нужно мириться с тем, что back sass из CSS и HTML говорит нам, где мы должны разместить наши элементы для достижения желаемого эффекта! В конце концов мы пошли на компромисс.
В то время как фактические элементы HTML в файле должны быть либо вложенными, либо содержаться в одном элементе, чтобы быть допустимыми :hover
целями друг для друга, position
атрибут css может использоваться для отображения любого элемента там, где вам нужно Я использовал position: fixed, чтобы разместить цель моего :hover
действия там, где я хотел, на экране пользователя независимо от его расположения в HTML-документе.
HTML:
<div id="explainBox" class="explainBox"> /*Common parent*/
<a class="defP" id="light" href="http://en.wikipedia.or/wiki/Light">Light /*highlighted term in text*/
</a> is as ubiquitous as it is mysterious. /*plain text*/
<div id="definitions"> /*Container for :hover-displayed definitions*/
<p class="def" id="light"> /*example definition entry*/ Light:
<br/>Short Answer: The type of energy you see
</p>
</div>
</div>
CSS:
/*read: "when user hovers over #light somewhere inside #explainBox
set display to inline-block for #light directly inside of #definitions.*/
#explainBox #light:hover~#definitions>#light {
display: inline-block;
}
.def {
display: none;
}
#definitions {
background-color: black;
position: fixed;
/*position attribute*/
top: 5em;
/*position attribute*/
right: 2em;
/*position attribute*/
width: 20em;
height: 30em;
border: 1px solid orange;
border-radius: 12px;
padding: 10px;
}
В этом примере цель :hover
команды из элемента в пределах #explainBox
должна быть #explainBox
или внутри #explainBox
. Атрибуты позиции, назначенные #definitions, заставляют его появляться в нужном месте (снаружи #explainBox
), даже если он технически расположен в нежелательной позиции в документе HTML.
Я понимаю, это считается плохой формой использования того же #id
для более чем одного HTML-элемента; однако в этом случае случаи #light
могут быть описаны независимо из-за их соответствующих позиций в уникально #id
d элементах. Есть ли причина не повторять id
#light
в этом случае?
~
для «куб находится где-то после контейнера в DOM и разделяет родителя»