Смена background

[aurfon]

Возможна ли смена background первого блока при наведении курсора на второй блок?

Пример, как я делаю и как не работает, хотя по логике должно =)

Html

<div class="bg">
     <div class="test">
     </div>
</div>

CSS

.bg {
    background: #ccc;
}
.test:hover .bg {
     background: #000;
}

по идее должна быть смена с серого на черный, но ничего не происходит. Хотя что-то мне подсказывает. что это не возможно =(

[lexxcode]

правильно не работает...

По css вы обращаетесь к дочернему элементу, а в действительности он родительский

[hypnocolor]

Через CSS — невозможно. Можно сделать через голый JavaScript, только первому слою нужно добавить идентификатор:

<div class="bg" id="bgchange">
     <div class="test" onmouseover="document.getElementById('bgchange').style.backgroundColor='#000';" onmouseout="document.getElementById('bgchange').style.backgroundColor='#ccc';">
     </div>
</div>

Можно и без идентификатора, но в таком случае при наведении мыши на дочерний блок с классом test будет изменяться фоновый цвет только у родительского блока с классом bg, что вам, в принципе, и нужно

<div class="bg">
     <div class="test" onmouseover="this.parent.style.backgroundColor='#000';" onmouseout="this.parent.style.backgroundColor='#ccc';">
     </div>
</div>

Edited April 4, 2012 by hypnocolor

[NeoXidizer]

вообще-то еще как возможно: http://jsfiddle.net/NuEqB/

или другой вариант http://jsfiddle.net/yhgQC/

[hypnocolor]

NeoXidizer, по вашей первой ссылке блоки идут друг за другом, а не вложены один в другой (что изложено в первом сообщении). По второй ссылке уже вложены друг в друга, но задача, опять же, не решается (меняется цвет дочернего блока, а не родительского).

[NeoXidizer]

NeoXidizer, по вашей первой ссылке блоки идут друг за другом, а не вложены один в другой (что изложено в первом сообщении). По второй ссылке уже вложены друг в друга, но задача, опять же, не решается (меняется цвет дочернего блока, а не родительского).

я просто продемонстрировал, что такое возможно впринципе на чистом CSS. К тому же

По css вы обращаетесь к дочернему элементу

поэтому у меня и не получилось реализовать с таким же кодом, как у автора. Но ничего не мешает использовать код, когда дивы рядом с друг другом, но наложить один див на другой через position или float

[aurfon]

поэтому у меня и не получилось реализовать с таким же кодом, как у автора. Но ничего не мешает использовать код, когда дивы рядом с друг другом, но наложить один див на другой через position или float

Вы совершенно правы! Спасибо большое за совет!

[leto2012]

вообще-то еще как возможно: http://jsfiddle.net/NuEqB/

Скажите пожалуйста, что означает +,

.test:hover +.bg {

background: #000;

}

где об этом написано?

нигде это не встречала, а без плюсика не работает.

Заранее спасибо.

[NeoXidizer]

+ означает, что элементы должны находиться друг за другом

где об этом написано?

http://www.w3.org/TR/CSS2/selector.html

а без + не работает все по той же причине

По css вы обращаетесь к дочернему элементу

а использовав + вы заставляете браузер применить свойство к соседнему элементу

[leto2012]

Можно и без идентификатора, но в таком случае при наведении мыши на дочерний блок с классом test будет изменяться фоновый цвет только у родительского блока с классом bg, что вам, в принципе, и нужно

<div class="bg">
     <div class="test" onmouseover="this.parent.style.backgroundColor='#000';" onmouseout="this.parent.style.backgroundColor='#ccc';">
     </div>
</div>

Так не работает

а нужно вот так:

<div class="bg">

<div class="test" onmouseover="this.parentNode.style.backgroundColor='#000';" onmouseout="this.parentNode.style.backgroundColor='#ccc';">

</div>

</div>