Question

因此我需要将div设为链接，并在使用鼠标悬停在此div上时更改背景颜色。问题是，这个div里面有两个子div，当我将鼠标移动到父div的边界时，它实际上是在一个子div上。因此，虽然我可以这样做，以便其中一个子div在悬停时改变，但第二个不会。

所以我想我的问题是，有没有办法让两个孩子的div在使用css徘徊时改变？

我不介意更改代码以使用表格，如果这样更容易，但我需要找到一些方法，以便在悬停在一个子/ td上时使整个div / tr更改。

我想在这里创建的内容与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

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

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

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

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

为：

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

这似乎对我有用。

一次改变两个div的背景颜色

4 个答案: