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

场景复现

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

相关推荐
光年像素13 小时前
前端开发的“三剑客”—— HTML、CSS、JavaScript
javascript·css·html5
前端与小赵14 小时前
渐变背景色和渐变字体颜色的实现方法
css·html·css3
Mo_jon14 小时前
CSS 瀑布流图片简易实现
前端·css·css3
@HNUSTer15 小时前
基于 HTML、CSS 和 JavaScript 的智能图像虚化系统
开发语言·前端·javascript·css·html
橙某人1 天前
💫分享一个CSS技巧:用径向渐变实现弯曲框缺口效果
前端·css
前端fighter1 天前
深入解析CSS定位:Sticky与Fixed的异同与实战应用
前端·css·面试
刺客-Andy1 天前
CSS中使用 HSL(Hue, Saturation, Lightness) 动态生成色值
前端·css·前端框架·vue
你的电影很有趣1 天前
lesson52:CSS进阶指南:雪碧图与边框技术的创新应用
前端·css
晓风残月淡1 天前
Mermaid流程图更改样式的方法
css·流程图·css3
芦苇Z1 天前
CSS :has() 父级选择器与关系查询
前端·css