Appliquer les règles css à d'autres éléments

Question

Je ne pense pas qu'il y ait une question SO actuelle traitant de cela; mais s'il y en a, s'il vous plaît pointez-moi dessus et je fermerai celui-ci.

Quoi qu'il en soit, html On suppose que comme ceci:

<div> 
    <div class="a" style="float:left;"></div> 
    <div class="b" style="float:left;"></div> 
    <div class="c" style="float:left;"></div> 
    <div style="clear:both;"></div> 
</div> 

est-il des règles css je peux définir qui modifient les styles des autres éléments en vol stationnaire. Donc, quelque chose comme

.a:hover { 
    // change bg colors of .b and .c 
    } 

Je sais que je peux le faire avec des événements hover en javascript; mais j'espérais une solution de css seulement. Si vous pouvez pointer vers une partie de la spécification css qui dit que ce n'est pas possible, je vais quand même marquer cela comme une réponse. (Même si je reconnais que je n'ai pas lu le tout, j'en ai lu un peu).

EDIT: Les réponses que tout le monde a marquées semblent fonctionner et sont la bonne réponse; mais ils ne fonctionnent pas dans Chrome/Safari (mais IE8 va bien ... allez comprendre: P). Voir ici: Why doesn't this CSS selector work: a:hover ~ span?

Answer 1

est-il des règles css je peux définir qui modifient les styles des autres éléments lors du survol

Vous pouvez utiliser adjacent sibling selectors dans ce cas (puisque b et c suivre un).

.a:hover + .b, 
.a:hover + .b + .c { } 

Vous pouvez également utiliser la general sibling combinator de CSS 3

.a:hover ~ div {} 

Bien que cela ait encore l'exigence que l'élément que vous en vol stationnaire est d'abord.

Je sais que je peux le faire avec les événements de clic dans javascr

événements mouseover serait plus logique

Si vous pouvez pointer vers une partie de la spécification CSS qui dit cela est NON possible

Les spécifications vous indiquent ce qui est possible. Ils affirment que rarement ce qui ne peut être fait (puisque fournir une liste exhaustive de ce qui est impossible rendrait toutes les spécifications énormes)

Answer 2

Utilisez ceci:

.a:hover + .b, 
.a:hover + .b + .c, 
{ 
    // styles of .b and .c 
} 

Plus sur combinators frères et soeurs: http://www.w3.org/TR/css3-selectors/#sibling-combinators

Answer 3

MyaBe il vous aidera un peu:

.a:hover + .b { 
    background-color:red; 
} 
.a:hover + .b + .c { 
    background-color:red; 
} 

résultats montre: http://jsfiddle.net/uNZSX/