解决css3遮罩层挡住下面元素事件的方法

时间:2023-03-08 20:51:40
解决css3遮罩层挡住下面元素事件的方法

比如大家常看到的鼠标移入图片中,会有一个挡住图片的黑色半透明遮罩层,上面还有文字介绍,这时候就会遇到该层遮挡住下面图片的跳转链接事件,这时候怎么办呢?有个简单的css3属性可以快速解决该问题:pointer-events:none

该属性主要基于svg技术,直观的解释就是可以忽略该层的事件监听,从而可以操作其下方的元素,这种应用在百度地图等页面中也常常用到,可以最大化用户的可操作区域,不会因为地图插件工具而阻挡了地图拖动,比如下面这种。

解决css3遮罩层挡住下面元素事件的方法

另外记录下项目中需要用的按钮阴影参数,回头好找.fbtn:hover{    box-shadow:0px 0px 10px 3px #aaa},跳转的页面滑入效果用margin将容器移出屏幕外在通过jQuery的animate来拽回来