一次更改两个 div 的背景颜色答案

【问题标题】：changing background colour of a two divs at once一次更改两个 div 的背景颜色
【发布时间】：2012-02-11 04:07:37
【问题描述】：

所以我需要创建一个 div 链接，并在鼠标悬停在该 div 上时更改背景颜色。问题是，这个 div 里面有两个子 div，当我将鼠标移动到父 div 的边界时，它实际上是在一个子 div 上。因此，虽然我可以使这些子 div 之一在悬停时发生变化，但第二个不会。

所以我想我的问题是，有没有办法在使用 css 悬停一个子 div 时让两个子 div 都发生变化？

如果这样更容易，我不介意更改代码以使用表格，但我需要找到一些方法来使整个 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>

代码就是这样。我最近一直在破解它，但那和我之前的一样

【问题讨论】：

标签： css html hover onmouseover

【解决方案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 上也会突出显示子 2。反之亦然在 CSS 中不起作用，因此需要一些 JS。

【讨论】：

是的，这是要走的路。这种东西不需要jQuery。我正要发布类似的东西，但我还没有看到 html 代码来了解他的确切含义。这个问题很模棱两可。
把孩子的背景颜色设置为透明怎么样？包含的 div 仍然得到 :hover。所以： .makehoverable:hover { background-color: red; } .makehoverable div {背景色：透明； }

【解决方案2】：

我认为您可能只需要修复一行 CSS。变化：

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

到：

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

这似乎对我有用。

【讨论】：

我现在的脸拍得太厉害了。我花了 3 个小时来解决这个问题，因为它有一个无法正常工作的空间。它是如此悲伤它有趣。感谢大家的回复。

【解决方案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

【讨论】：

您的 jquery 代码可能会工作，但它很混乱，可以改进以获得最佳性能。 $('.color').hover(function(){ $(this).toggleClass('red'); });。一行。
感谢 elclanrs。很好的修正。我有点草率。

【解决方案4】：

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

【讨论】：

Rahul 看看我对 nolt2232 的回答