我有两个 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;
}
最佳答案
不适用于纯 CSS。如果您将鼠标悬停在一个子项上,那么您必然将鼠标悬停在其父项上。
但是 CSS4 计划包含一些可能有帮助的东西:
#test! div:hover {background-color: red;}
!
将使 #test
成为选择器的主题,因此如果它包含 div,它将选择
,然后重新应用红色背景。#test
:hover
关于html - CSS 格 :hover exclusion,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11003371/