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>

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

相关推荐
伟笑27 分钟前
React 的常用钩子函数在Vue中是如何设计体现出来的。
前端·react.js
Sapphire~1 小时前
重学前端003 --- CSS 颜色
前端·css
慧一居士1 小时前
CSS和CSS3区别对比
前端·css3
我血条子呢1 小时前
动态组件和插槽
前端·javascript·vue.js
中微子1 小时前
RESTful架构与前后端路由演进:构建现代化Web应用的核心规范
前端
前端付豪1 小时前
13、表格系统架构:列配置、嵌套数据、复杂交互
前端·javascript·架构
南屿im1 小时前
发布订阅模式和观察者模式傻傻分不清?一文搞懂两大设计模式
前端·javascript
I_have_a_lemon1 小时前
前端、产品、设计师神器推荐——Onlook
前端·cursor
前端小巷子1 小时前
深入解析CSRF攻击
前端·安全·面试
JustHappy1 小时前
SPA?MPA?有啥关系?有啥区别?聊一聊页面形态 or 路由模式
前端·javascript·架构