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

Question

Так что мне нужно сделать 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>

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

Answer 1

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

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

С этим HTML:

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

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

Answer 2

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

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

до:

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

Мне показалось, что это сработало.

Answer 3

Вы пробовали использовать 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

Answer 4

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