Kann ich bei einem CSS-Hover-Ereignis das Styling eines anderen Divs ändern?

Question

Wenn ich mit dem Mauszeiger über ein Div oder eine Klasse mit der ID "a" fahre, kann ich dann die Hintergrundfarbe eines Div oder einer Klasse mit der ID "b" ändern?

Answer 1

Ja, das können Sie tun, aber nur, wenn #b ist nach #a in der HTML-Datei.

Si #b kommt unmittelbar nach #a : http://jsfiddle.net/u7tYE/

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

<div id="a">Div A</div>
<div id="b">Div B</div>

Das ist die Verwendung des Nachbargeschwisterkombinator ( + ).

Wenn es andere Elemente zwischen #a y #b können Sie dies verwenden: http://jsfiddle.net/u7tYE/1/

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

<div id="a">Div A</div>
<div>random other elements</div>
<div>random other elements</div>
<div>random other elements</div>
<div id="b">Div B</div>

Das ist die Verwendung des allgemeiner Geschwisterkombinator ( ~ ).

Beide + y ~ funktionieren in allen modernen Browsern und IE7+

Si #b ist ein Abkömmling von #a können Sie einfach Folgendes verwenden #a:hover #b .

ALTERNATIVE: Sie können reines CSS verwenden, um dies zu erreichen, indem Sie das zweite Element vor dem ersten positionieren. Das erste div steht im Markup an erster Stelle, ist aber nach rechts oder unter dem zweiten positioniert. Es wird so funktionieren, als wäre es ein vorheriges Geschwister-Element.

Answer 2

Dies lässt sich nicht allein mit CSS bewerkstelligen. Dies ist ein Verhalten, das das Styling der Seite beeinflusst.

Mit jquery können Sie das Verhalten aus Ihrer Frage schnell umsetzen:

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

Answer 3

Eine reine Lösung ohne jQuery:

Javascript (Kopf)

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

HTML (Körper)

<div id="a" onmouseover="chbg('red')" onmouseout="chbg('white')">This is element a</div>
<div id="b">This is element b</div>

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

Answer 4

Das folgende Beispiel basiert auf jQuery, aber es kann mit jedem JS-Toolkit oder sogar mit einfachem JS realisiert werden

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