嵌套 Div 悬停问题答案

【问题标题】：Nested Div hover question嵌套 Div 悬停问题
【发布时间】：2010-12-20 17:39:44
【问题描述】：

我有 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 的方式。

谢谢马自达

【问题讨论】：

标签： css html hover

【解决方案1】：

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

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

【讨论】：

【解决方案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 中不起作用，因为它只支持在标签上悬停。

【讨论】：

【解决方案3】：

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

但是你可以像这样用 jQuery 做到这一点：

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

我已经发了example for you here。

【讨论】：

【解决方案4】：

仅使用 CSS 执行此操作的唯一方法是在悬停发生时使用额外的 div 覆盖 maindiv。而且它不适用于 IE

这将是标记

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

CSS 会很棘手。

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

MainDiv 必须是 position:relative 或 position:absolute，固定宽度和高度，z-index = -1。
嵌套的 div 1 和 2 不能是位置：相对或绝对，并且 z-index = 1
额外的 div 必须是：position:absolute、top:0、left:0，并且宽度和高度与 MainDiv、display:hidden 和 z-index = 0 相同
#nexteddiv2:hover #extradiv 会有 display:block

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

这种方法的一个缺点是，在您停止悬停它之前，extradiv 是可见的，而不仅仅是nesteddiv2。

【讨论】：