Comment affecter d'autres éléments quand une div est hovered

Dans cet exemple particulier, vous pouvez utiliser:

#container:hover #cube {
    background-color: yellow;   
}

cela ne fonctionne que depuis cube est un enfant de container . Pour des scénarios plus compliqués, vous devez utiliser javascript.

utilisant le sélecteur de frère est la solution générale pour le style d'autres éléments en vol stationnaire au-dessus d'un donné, mais il fonctionne que si les autres éléments suivent le donné dans le DOM . Que pouvons-nous faire lorsque les autres éléments doivent être effectivement avant le plané? Disons que nous voulons implémenter un widget de notation de barre de signaux comme celui ci-dessous:

cela peut en fait être fait facilement en utilisant le modèle CSS flexbox, en réglant flex-direction à reverse , de sorte que les éléments sont affichés dans l'ordre opposé de celui qu'ils sont dans le DOM. La capture d'écran ci-dessus est à partir d'un tel widget, mis en œuvre avec CSS pur.

Flexbox est très bien supporté par 95% des navigateurs modernes.

.rating {
  display: flex;
  flex-direction: row-reverse;
  width: 9rem;
}
.rating div {
  flex: 1;
  align-self: flex-end;
  background-color: black;
  border: 0.1rem solid white;
}
.rating div:hover {
  background-color: lightblue;
}
.rating div[data-rating="1"] {
  height: 5rem;
}
.rating div[data-rating="2"] {
  height: 4rem;
}
.rating div[data-rating="3"] {
  height: 3rem;
}
.rating div[data-rating="4"] {
  height: 2rem;
}
.rating div[data-rating="5"] {
  height: 1rem;
}
.rating div:hover ~ div {
  background-color: lightblue;
}

<div class="rating">
  <div data-rating="1"></div>
  <div data-rating="2"></div>
  <div data-rating="3"></div>
  <div data-rating="4"></div>
  <div data-rating="5"></div>
</div>

grand merci à Mike et Robertc pour leurs messages utiles!

si vous avez deux éléments dans votre HTML et que vous voulez :hover au-dessus de l'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 les deux doivent être contenus dans le même élément plus large.

je voulais afficher les définitions dans une boîte sur le côté droit du navigateur lorsque mes utilisateurs lisent mon site et :hover sur les termes en surbrillance; par conséquent, je ne voulais pas que l'élément "définition" soit affiché à l'intérieur de l'élément "Texte".

j'ai presque abandonné et je viens d'ajouter javascript à ma page, mais c'est la crotte du futur! Nous ne devrions pas avoir à mettre en place avec back sass de CSS et HTML nous dire où nous devons placer nos éléments pour obtenir les effets que nous voulons! À la fin, nous compromise.

alors que les éléments HTML réels dans le fichier doivent être soit imbriqués ou contenus dans un seul élément pour être valide :hover cibles les uns pour les autres, l'attribut css position peut être utilisé pour afficher n'importe quel élément où vous voulez. J'ai utilisé la position:fixe pour placer la cible de mon action :hover où je la voulais sur l'écran de l'utilisateur indépendamment de son emplacement dans le document HTML.

Le code 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 commande :hover d'un élément dans #explainBox doit être soit #explainBox , soit aussi dans #explainBox . Les attributs de position attribués à #definitions le forcent à apparaître à l'emplacement désiré (à l'extérieur de #explainBox ) même s'il est techniquement situé dans une position non désirée dans le document HTML.

je comprends qu'il est considéré comme mauvais formulaire pour 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 des éléments uniques #id 'd. Y a-t-il une raison de ne pas répéter le id #light dans ce cas?

seulement cela a fonctionné pour moi:

#container:hover .cube { background-color: yellow; }

où .cube est CssClass de la #cube .

testé dans Firefox , Chrome et Edge .

Voici une autre idée qui vous permet d'affecter d'autres éléments sans tenir compte d'un sélecteur spécifique et en utilisant seulement l'état :hover de l'élément principal.

pour cela, je vais m'appuyer sur l'utilisation de propriétés personnalisées (variables CSS). Comme nous pouvons le lire dans la spécification :

propriétés Personnalisées ordinaire "propriétés de la 1519180920" , de sorte qu'ils peuvent être déclarés sur tout élément, sont résolus avec l'héritage normal et cascade règles ...

#container {
  width: 200px;
  height: 30px;
  border: 1px solid var(--c);
  --c:red;
}
#container:hover {
  --c:blue;
}
#container > div {
  width: 30px;
  height: 100%;
  background-color: var(--c);
}

<div id="container">
  <div>
  </div>
</div>

.container {
  --c:red;
  width:400px;
  display:flex;
  border:1px solid var(--c);
  justify-content:space-between;
  padding:5px;
  background:linear-gradient(var(--c),var(--c)) 0 50%/100% 3px no-repeat;
}
.box {
  width:30%;
  background:var(--c);
  box-shadow:0px 0px 5px var(--c);
  position:relative;
}
.box:before {
  content:"A";
  display:block;
  width:15px;
  margin:0 auto;
  height:100%;
  color:var(--c);
  background:#fff;
}

/*Hover*/
.container:hover {
  --c:blue;
}

<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>