一次改变两个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>

将鼠标悬停在 Child 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; }
​  

< strong>编辑：清理了 javascript，谢谢 elclanrs

Answer 4

试试这个http://jsfiddle.net/rsarika/rtGw5/1/