嵌套 Div 悬停问题

Question

我有3个这样的html div：

<div id="MainDiv">
  <div id="nesteddiv1"></div>
  <div id="nesteddiv2"></div>
</div>

我希望当我将鼠标悬停在 MainDiv 或nestedDiv1 上时，我为 MainDiv 设置颜色 1 ，为nesteddiv2 设置颜色 2 ，然后当我将鼠标悬停在nesteddiv2 上时，我更改nesteddiv2 和 MainDiv 的背景颜色。

我更喜欢用 CSS 来做，我知道 javascript 的方式。

谢谢 马兹达克

Answer 1

在 CSS 中，无法使用包含其后代之一的选择器来定位元素。因此，虽然前半部分实现起来微不足道，但后半部分却是不可能实现的。

如果这很重要，请使用 JavaScript。

Answer 2

对于给定的 HTML，您可以使用以下 CSS

#MainDiv:hover{
    color:red;
}

#MainDiv div#nesteddiv1{
    color:gray;
}

#MainDiv div#nesteddiv1:hover{
    color:blue;
}

#MainDiv div#nesteddiv2{
    color:yellow;
}

#MainDiv div#nesteddiv2:hover{
    color:green;
}

注意：这在 IE 中不起作用，因为它仅支持将鼠标悬停在标签上。

Answer 3

没有办法从另一个元素中选择一个元素，这是不可能的。

但是您可以使用 jQuery 来做到这一点，如下所示：

$(function() {
    $("#div1").hover(function() {
        $("#show-hide").toggleClass('highlight');
    });
});

我在这里为您制作了一个示例。

Answer 4

仅使用 CSS 实现此目的的唯一方法是在悬停发生时使用额外的 div 来覆盖 maindiv。并且它不适用于 IE < v9，因为它需要 z-index

这将是标记

<div id="MainDiv">
  <div id="nesteddiv1"></div>
  <div id="nesteddiv2">
    <div id="extradiv"><div>
  </div>
</div>

CSS 将非常棘手。

（免责声明：这尚未经过测试 - 可能您需要更多规则）

• MainDiv 必须是位置：相对或位置：绝对，固定宽度和高度，并且 z-index = -1。
• 嵌套 div 1 和 2 不能是位置：相对或绝对，并且 z-index = 1
• 额外的 div 必须是：位置：绝对、顶部：0、左侧：0，并且宽度和高度与 MainDiv 相同，显示：隐藏，并且 z-index = 0
• #nexteddiv2:hover #extradiv 将具有 display:block

z-index 将使 maindiv 始终位于其他 div 后面，而嵌套 div 1 和 2 始终位于顶部。 extradiv 将位于它们之间，“覆盖”maindiv，但仅当 Nesteddiv2 悬停时才有效。

此方法的一个缺点是 extradiv 会一直可见，直到您停止悬停它，而不仅仅是nesteddiv2。