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>

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

相关推荐
愚昧之山绝望之谷开悟之坡8 分钟前
什么是uv和传统的区别
前端·chrome·uv
SRC_BLUE_1717 分钟前
NSSCTF - Web | 【第五空间 2021】pklovecloud
android·前端
golang学习记18 分钟前
从0死磕全栈之Next.js 数据安全实战指南:从零信任到安全架构
前端
云中雾丽20 分钟前
flutter中 getx 的使用
前端
Jay丶37 分钟前
聊聊入职新公司两个月,试用期没过这件事
前端·面试
ZTeam前端全栈进阶圈41 分钟前
Vue新技巧:<style>标签里的 CSS 也能响应式!
前端
ღ_233342 分钟前
vue3二次封装element-plus表格,slot透传,动态slot。
前端·javascript·vue.js
xiaohe060143 分钟前
🔒 JavaScript 不是单线程吗?怎么还能上“锁”?!
javascript·github
摸着石头过河的石头1 小时前
JavaScript继承的多种实现方式详解
前端·javascript
ybb_ymm1 小时前
前端开发之ps基本使用
前端·css