我有这个Fiddle ，而我想要做的是，当您将鼠标悬停在每个 div 部分上时，它只会更改该部分的背景。有什么办法可以在不改变所有背景的情况下做到这一点？当我将鼠标悬停在 .two 上时，.one:hover 被触发。当我将鼠标悬停在 .two 上时，如何让它触发 .two 而不是 .one？
CSS:
div.one:hover, div.two:hover, div.three:hover{
background-color: #69aeea;
}
HTML:
<div class="one">
Text 1
<div class="two">
Text 2
<div class="three">Text 3</div>
<div class="three">Text 3</div>
<div class="three">Text 3</div>
</div>
<div class="two">
Text 2
<div class="three">Text 3</div>
<div class="three">Text 3</div>
<div class="three">Text 3</div>
</div>
</div>
最佳答案
:hover一直被触发到根父级(通常是 <body> )，所以当你有 :hover 时你不能只在子级上触发它 parent 的状态。
您需要做的是隔离您实际想要显示悬停状态的部分，在本例中，我通过将文本包装在 <span> 中来完成。 .这将保留 :hover与该 parent 的其他 child 隔离的状态。
<div class="one">
<span>Text 1</span>
<div class="two">
<span>Text 2</span>
<div class="three"><span>Text 3</span></div>
...
然后在 CSS 中专门定位:(> 字符选择父的直系后代)
div > span:hover {
background-color: #69aeea;
}
然后您可以根据级别使用不同的颜色，如下所示:
div.one > span:hover {
background-color: #69aeea;
}
div.two > span:hover {
background-color: #ae69ea;
}
div.three > span:hover {
background-color: #aeea69;
}
关于html - CSS悬停子div背景颜色变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20108293/