В событии наведения CSS можно изменить другой стиль div?

Ответ 1

Да, вы можете это сделать, но только если #b после #a в HTML.

Если #b появляется сразу после #a: http://jsfiddle.net/u7tYE/

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

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

Что с помощью смежного сиблингового комбинатора (+).

Если между #a и #b есть другие элементы, вы можете использовать это: 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>

Это с помощью общего сочетания братьев и сестер (~).

Оба + и ~ работают во всех современных браузерах и IE7 +

Если #b является потомком #a, вы можете просто использовать #a:hover #b.

АЛЬТЕРНАТИВА: вы можете использовать чистый CSS, чтобы сделать это, расположив второй элемент до первого. Первый div является первым в разметке, но расположен справа или ниже второго. Он будет работать, как если бы он был предыдущим братом.

Ответ 2

Это не может быть сделано исключительно с помощью css. Это поведение, которое влияет на стиль страницы.

С помощью jquery вы можете быстро реализовать поведение из своего вопроса:

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

Ответ 3

Следующий пример основан на jQuery, но его можно достичь с помощью любого набора инструментов JS или даже простого старого JS

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

Ответ 4

Чистое решение без jQuery:

Javascript (глава)

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

HTML (тело)

<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/