Lors d'un événement de survol CSS, puis-je changer le style d'une autre div ?

Question

Quand je survole une div ou une classe ayant un id de "a", puis-je obtenir le changement de couleur de fond d'une div ou d'une classe avec l'id de "b" ?

Answer 1

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 de frères adjacents (+).

Si d'autres éléments se trouvent entre #a et #b, vous pouvez utiliser ceci: http://jsfiddle.net/u7tYE/1/

#a:hover ~ #b {
    background: #ccc
}

Div A
autres éléments aléatoires
autres éléments aléatoires
autres éléments aléatoires
Div B

Cela utilise le combinateur de frères généraux (~).

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

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

ALTERNATIVE : Vous pouvez utiliser uniquement du CSS pur pour cela en positionnant le deuxième élément avant le premier. Le premier div est le premier dans le balisage, mais positionné à droite ou en dessous du second. Cela fonctionnera comme s'il s'agissait d'un précédent frère.

Answer 2

Cela ne peut pas être fait uniquement avec du css. Il s'agit d'un comportement qui affecte le style de la page.

Avec jquery, vous pouvez rapidement implémenter le comportement de votre question :

$(function() {
  $('#a').hover(function() {
    $('#b').css('background-color', 'yellow');
  }, function() {
    // sur mouseout, réinitialiser la couleur de fond
    $('#b').css('background-color', '');
  });
});

Answer 3

Une solution pure sans jQuery:

Javascript (Head)

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

HTML (Body)

Ceci est l'élément a
Ceci est l'élément b

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

Answer 4

L'exemple suivant est basé sur jQuery mais il peut être réalisé en utilisant n'importe quel ensemble d'outils JS ou même du bon vieux JS

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