html - CSS div:hover 排除

Question

我有两个divs，一个在另一个里面。当我hover在外面的时候，我想改变它的颜色，没问题。但是当我hover在里面时，我只想改变它的颜色。这可能吗？换句话说，当hover越过内部 div 时，我希望看到红色的“环”。

<div id="test"><div></div></div>

#test {
    background-color: red;
    position: relative;
    width: 100px;
    height: 100px;
}
#test:hover {
    background-color: white;
}
#test div {
    background-color: green;
    position: absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
}
#test div:hover {
    background-color: white;
}

Answer 1

不是纯 CSS。如果您将鼠标悬停在一个孩子上，那么您必然将鼠标悬停在其父级上。

然而 CSS4 计划包括一些可能有帮助的东西：

#test! div:hover {background-color: red;}

将!成为#test选择器的主题，因此它将选择#test它是否包含 a div:hover，并重新为其应用红色背景。

Answer 2

不嵌套 div 将起作用。

看到这个小提琴：

HTML：

<div id="test"></div>
<div id="ttt"></div>

CSS：

#test {
    background-color: red;
    position: relative;
    width: 100px;
    height: 100px;
}

#test:hover {
    background-color: white;
}

#ttt {
    background-color: green;
    position: absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
}

#ttt:hover {
    background-color: white;
}