Question

我有两个div，一个在另一个里面。当我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，它会选择div:hover，然后重新应用红色背景

Answer 2

不嵌套div将起作用。

请参阅此fiddle：

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

CSS div：悬停排除

2 个答案:

HTML：

CSS：