场景复现
html
<style>
.cover:hover {
background: yellow;
}
</style>
<div class="size-20 bg-black cover">
<div class="size-10 bg-blue cover"></div>
</div>
如上代码当子元素 hover
时会同时触发父元素的 hover
效果,如下所示:

解决方案
html
<style>
.cover:hover:not(:has(.cover:hover)) {
background: yellow;
}
</style>
<div class="size-20 bg-black cover">
<div class="size-10 bg-blue cover"></div>
</div>
使用 :not
:has
伪类选择器控制即可,如下所示,当子元素 hover
状态下不会同时触发父元素的 hover
效果:
