CSS - 子元素 hover 鼠标悬浮时避免触发父元素的 hover 效果

0x0002025-09-04 10:11

场景复现

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 效果：