изменение цвета фона двух div одновременно

Поэтому мне нужно сделать div ссылкой и изменить цвет фона при наведении курсора мыши на этот div. Проблема в том, что внутри этого div есть два дочерних div, и когда я подвожу указатель мыши к границам родительского div, он фактически оказывается на дочернем div. Поэтому, хотя я могу сделать так, чтобы один из этих дочерних элементов изменялся при наведении курсора, второй - нет.

Итак, я думаю, мой вопрос в том, есть ли способ изменить оба дочерних элемента div при наведении курсора на один с помощью css?

Я не против изменить код для использования таблиц, если это проще, но мне нужно найти способ изменить весь div / tr при наведении курсора на один дочерний элемент / td.

То, что я на самом деле хочу создать здесь, это что-то почти такое же, как и окна рекомендуемых видео на YouTube (справа на странице).

заранее спасибо

CSS

#parent {
width: 318px;
height: 90px;
background-color: #FFFFFF;
margin: 5px 0px 5px 0px;
font-size: 10px;
}

#parent :hover {
background-color: #0000ff;
}

#child1 {
width:120px;
float:left;
}

child2 {
width:188px;
float:right;
}

HTML (с некоторыми другими вещами)

<c:forEach var="item" items="${list}">
<a href="webpage?item.getinfo()">
    <div id="parent">
        <div id="child1">
            <img src="img.jpg">
        </div>
        <div id="child2">
            ${item.getinfo2()} <br>
            ${item.getinfo3()} <br>                      
        </div>
    </div>
</a>
</c:forEach>

Код примерно такой. Я взламывал это в последнее время, но это было что-то вроде того, что у меня было раньше


html css hover onmouseover
person Predz    schedule 11.02.2012    source источник

Ответы (4)


arrow_upward
0
arrow_downward

Я думаю, вам просто нужно исправить строку вашего CSS. Изменять:

#parent :hover {
  background-color: #0000ff;
}

to:

#parent:hover {
  background-color: #0000ff;
}

Кажется, это сработало для меня.

person Brandan    schedule 11.02.2012
comment
Я сейчас так сильно фейспальмирую. Я потратил добрых 3 часа, играя с этим, и это из-за места, в котором оно не работало. Это так грустно, что смешно. Спасибо всем за ответы. - person Predz; 11.02.2012

arrow_upward
2
arrow_downward

Если тот, на который вы можете навести курсор, является первым, вам нужен только CSS:

.mavehoverable > div:hover, .makehoverable > div:hover + div {
    background-color: red;
}

С помощью этого HTML:

<div class="makehoverable">
    <div>Child 1</div>
    <div>Child 2</div>
</div>

При наведении курсора на Child 1 также будет выделен Child 2. И наоборот, не работает в CSS, поэтому для этого потребуется немного JS.

person Niet the Dark Absol    schedule 11.02.2012
comment
Да, это путь. jQuery НЕ нужен для такого рода вещей. Я собирался опубликовать что-то подобное, но я еще не видел html-код, чтобы точно понять, что он имеет в виду. Вопрос довольно двусмысленный. - person elclanrs; 11.02.2012
comment
Как насчет того, чтобы установить прозрачный цвет фона для детей? Содержащий div по-прежнему получает :hover. Итак: .makehoverable:hover { background-color: red; } .makehoverable div {фоновый цвет: прозрачный; } - person eric; 11.02.2012

arrow_upward
0
arrow_downward

Вы пробовали использовать jQuery? Вы можете сделать что-то вроде этого:

http://jsfiddle.net/UtdYY/

HTML:

<div class='color'>
  <div class='color child'>test123</div>
  <div class='color child'>test456</div> 
</div>

Javascript:

$('.color').hover(function(){ $(this).toggleClass('red'); });

CSS:

.red { color:red; }
.child {height: 50px; }
​

Изменить: исправлен JavaScript, спасибо, elclanrs.

person nolt2232    schedule 11.02.2012
comment
Ваш код jquery может работать, но он беспорядочный и его можно улучшить для достижения наилучшей производительности. $('.color').hover(function(){ $(this).toggleClass('red'); });. Одна линия. - person elclanrs; 11.02.2012
comment
Спасибо, elclarns. Хорошая коррекция. Немного неаккуратно с моей стороны. - person nolt2232; 11.02.2012

arrow_upward
0
arrow_downward

Попробуйте это http://jsfiddle.net/rsarika/rtGw5/1/

person Rahul    schedule 11.02.2012
comment
Рахул Взгляните на мой ответ nolt2232 - person elclanrs; 11.02.2012