Sur un événement de hover CSS, puis-je modifier le style d’un autre div?

Duplication possible:
Y a-t-il un moyen de survoler un élément et de créer un élément différent?

Lorsque je survole une div ou une classe avec un identifiant “a”, puis-je changer la couleur d’arrière-plan d’un div ou d’une classe avec l’id de “b”?

Oui, vous pouvez le faire, mais seulement si #b est après #a dans le HTML.

Si #b vient immédiatement après #a : http://jsfiddle.net/u7tYE/

 #a:hover + #b { background: #ccc } Div A
 Div B

Cela utilise le combinateur fraternel adjacent ( + ).

S’il y a d’autres éléments entre #a et #b , vous pouvez utiliser ceci: http://jsfiddle.net/u7tYE/1/

 #a:hover ~ #b { background: #ccc } Div A
 random other elements
 random other elements
 random other elements
 Div B

Cela utilise le combinateur fraternel général ( ~ ).

Les deux + et ~ fonctionnent dans tous les navigateurs modernes et dans IE7 +

Si #b est un descendant de #a , vous pouvez simplement utiliser #a:hover #b .

ALTERNATIVE: Pour ce faire, vous pouvez utiliser du CSS pur en positionnant le second élément avant le premier. Le premier div est en premier dans le balisage, mais positionné à droite ou en dessous du second. Cela fonctionnera comme si c’était un frère précédent.

Cela ne peut pas être fait uniquement avec css. Ceci est un comportement qui affecte le style de la page.

Avec jquery, vous pouvez rapidement appliquer le comportement de votre question:

 $(function() { $('#a').hover(function() { $('#b').css('background-color', 'yellow'); }, function() { // on mouseout, reset the background colour $('#b').css('background-color', ''); }); });

L’exemple suivant est basé sur jQuery mais il peut être réalisé en utilisant n’importe quel kit d’outils JS ou même les anciens JS

 $(document).ready(function(){ $("#a").mouseover(function(){ $("#b").css("background-color", "red"); }); });

Une solution pure sans jQuery:

Javascript (Head)

 function chbg(color) { document.getElementById('b').style.backgroundColor = color; }

HTML (corps)

 This is element a
 This is element b

JSFiddle: http://jsfiddle.net/YShs2/