css 在 hover 子元素时,不要让父元素触发 hover 效果

别人写的没看到一个能好用的,虽然功能简单,但是这个应该还是比较陌生的

希望帮到你,能帮我点个赞

废话不多书,直接出代码

html 复制代码
    <div class="parent">
      <div class="child">悬停我</div>
    </div>

    <style>
      .parent {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        transition: background-color 0.3s;
      }

      .parent:not(:has(.child:hover)):hover {
        background-color: lightcoral; /* 父元素的 hover 效果 */
      }

      .child {
        width: 100px;
        height: 100px;
        background-color: lightgreen;
      }

      .child:hover {
        background-color: lightcyan;
      }
    </style>

希望帮到你,能帮我点个赞

相关推荐
AnalogElectronic几秒前
vue3 实现贪吃蛇 电脑版01
javascript·vue.js·ecmascript
trsoliu2 分钟前
2025年Web前端前沿技术动态:WebGL动画、CSS View Transitions与HTML隐藏API
前端·javascript·css
trsoliu4 分钟前
2025年Web前端最新趋势:React基金会成立、AI编码助手崛起与Astro极速搜索
前端·javascript·react.js
一 乐7 分钟前
商城推荐系统|基于SprinBoot+vue的商城推荐系统(源码+数据库+文档)
前端·数据库·vue.js·spring boot·后端·商城推荐系统
亿元程序员13 分钟前
为什么游戏公司现在都喜欢用protobuf?
前端
鹏多多15 分钟前
React瀑布流Masonry-Layout插件全方位指南:从基础到进阶实践
前端·javascript·react.js
fruge22 分钟前
前端数据可视化实战:Chart.js vs ECharts 深度对比与实现指南
前端·javascript·信息可视化
卓码软件测评31 分钟前
借助大语言模型实现高效测试迁移:Airbnb的大规模实践
开发语言·前端·javascript·人工智能·语言模型·自然语言处理
IT_陈寒36 分钟前
SpringBoot 3.0实战:这套配置让我轻松扛住百万并发,性能提升300%
前端·人工智能·后端
♡喜欢做梦37 分钟前
Spring Web MVC 入门秘籍:从概念到实践的快速通道(上)
前端·spring·mvc