css中取消鼠标事件pointer-events:none应用场景

最新推荐文章于 2024-07-23 20:33:23 发布

至尊绝伦

最新推荐文章于 2024-07-23 20:33:23 发布

阅读量1.1k

点赞数 1

分类专栏：笔记文章标签： css html

本文链接：https://blog.csdn.net/m0_51636525/article/details/124387223

版权

本文探讨了在CSS中如何使用pointer-events:none属性来取消鼠标事件，特别是在处理上层元素覆盖下层元素且需要独立触发hover事件的情景。通过设置pointer-events:none，可以阻止上层元素响应鼠标事件，然后针对特定元素设置pointer-events:auto恢复其鼠标事件功能，实现下层元素的hover效果。

摘要由CSDN通过智能技术生成

鼠标放置在红圈位置，不能触发hover小手

上方的图片和按钮有一定的宽度，所以需要给上方的图片和按钮 取消鼠标事件

上层的按钮也是有hover事件的，所以把整个先取消掉鼠标事件，pointer-events:none;再给那些需要hover事件的按钮添加pointer-events:auto;

.right-nav {
            
            pointer-events: none;

            position: fixed;
            top: 50%;
            right: 0;
            z-index: 3;
            margin-top: -240px;
            width: 254px;
            height: 494px;
            background: url(./img/right-nav-bg.png) no-repeat top left;