自学内容网 自学内容网
自学内容网 > 正文

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

🕗 发布于 2024-11-05 23:41 css  前端  javascript  

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

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

废话不多书，直接出代码

    <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>

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


原文地址：https://blog.csdn.net/weixin_42335036/article/details/143364910

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024