Могу ли я изменить стиль другого div на событии при наведении курсора CSS?

Question

Возможный дубликат:
Есть ли способ навести курсор на один элемент и повлиять на другой элемент?

При наведении курсора на элемент div или класс с идентификатором "a", могу ли я изменить цвет фона элемента div или класса с идентификатором "b"?

Answer 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 - первый в разметке, но расположен справа или ниже второго. Это будет работать так, как если бы это был предыдущий брат.

Answer 2

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

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

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

Answer 3

Чистое решение без 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/

Answer 4

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

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