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');
    });
});

我做了example for you here。

Answer 4

使用CSS执行此操作的唯一方法是在悬停发生时使用额外的div来覆盖maindiv。它不适用于IE＆lt; v9，因为它需要z-index

这将是标记

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

CSS会非常棘手。

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

MainDiv必须是position：relative或position：absolute，fixed width and height，z-index = -1。
嵌套的div 1和2不能是position：relative或absolute，而z-index = 1
额外div必须是：position：absolute，top：0，left：0，与MainDiv相同的witdth和height，display：hidden，z-index = 0
#nexteddiv2：hover #extradiv将显示：block

z-index会让maindiv永远落后于其他人，而嵌套的div 1和2总是保持领先。 extradiv将在他们之间，'覆盖'maindiv，但只有当nesteddiv2被徘徊时。

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

嵌套Div悬停问题

4 个答案: