Jump to content
  • 0

Смена background


aurfon
 Share

Question

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

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

Html

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

CSS

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

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

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

Через 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 by hypnocolor
Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

я просто продемонстрировал, что такое возможно впринципе на чистом CSS. К тому же
По css вы обращаетесь к дочернему элементу
поэтому у меня и не получилось реализовать с таким же кодом, как у автора. Но ничего не мешает использовать код, когда дивы рядом с друг другом, но наложить один див на другой через position или float
Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

  • 0

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

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

.test:hover +.bg {

background: #000;

}

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

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

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

Link to comment
Share on other sites

  • 0

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

где об этом написано?
http://www.w3.org/TR/CSS2/selector.html

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

По css вы обращаетесь к дочернему элементу
а использовав + вы заставляете браузер применить свойство к соседнему элементу
Link to comment
Share on other sites

  • 0

Можно и без идентификатора, но в таком случае при наведении мыши на дочерний блок с классом 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>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy