html - CSS 格 :hover exclusion

Question

我有两个 div，一个在另一个里面。当我将鼠标悬停 到最外面的那个时，我想改变它的颜色，没问题。但是，当我将鼠标悬停 到内部时，我只想更改它的颜色。这可能吗？换句话说，当 将鼠标悬停到内部 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 成为选择器的主题，因此如果它包含 div，它将选择 #test :hover，然后重新应用红色背景。