Un grand merci à Mike et Robertc pour leurs messages utiles!
Si vous avez deux éléments dans votre code HTML et que vous souhaitez en :hover
superposer un et cibler un changement de style dans l'autre, les deux éléments doivent être directement liés - parents, enfants ou frères et sœurs. Cela signifie que les deux éléments doivent être l'un dans l'autre ou doivent tous deux être contenus dans le même élément plus grand.
Je voulais afficher les définitions dans une boîte sur le côté droit du navigateur pendant que mes utilisateurs lisent mon site et les :hover
termes en surbrillance; par conséquent, je ne voulais pas que l'élément 'definition' soit affiché à l'intérieur de l'élément 'text'.
J'ai presque abandonné et j'ai juste ajouté du javascript à ma page, mais c'est le futur, dang it! Nous ne devrions pas avoir à supporter le dos sass de CSS et HTML nous disant où nous devons placer nos éléments pour obtenir les effets que nous voulons! En fin de compte, nous avons compromis.
Bien que les éléments HTML réels du fichier doivent être imbriqués ou contenus dans un seul élément pour être des :hover
cibles valides les uns aux autres, l' position
attribut css peut être utilisé pour afficher n'importe quel élément où vous le souhaitez. J'ai utilisé position: fixed pour placer la cible de mon :hover
action là où je la voulais sur l'écran de l'utilisateur quel que soit son emplacement dans le document HTML.
Le 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>
Le 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;
}
Dans cet exemple, la cible d'une :hover
commande à partir d'un élément à l'intérieur #explainBox
doit être #explainBox
ou également à l'intérieur #explainBox
. Les attributs de position attribués à #definitions le forcent à apparaître à l'emplacement souhaité (extérieur #explainBox
) même s'il est techniquement situé dans une position indésirable dans le document HTML.
Je comprends qu'il est considéré comme une mauvaise forme d'utiliser le même #id
pour plus d'un élément HTML; cependant, dans ce cas, les instances de #light
peuvent être décrites indépendamment en raison de leurs positions respectives dans #id
des éléments uniques . Y a-t-il une raison de ne pas répéter le id
#light
dans ce cas?
~
pour «le cube est quelque part après le conteneur dans le DOM et partage un parent»