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

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

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

你可以为红框区域设置该css属性,这样红框就不会阻挡用户拖动地图的操作了,但是里面的组件你还要单独加上pointer-events:auto,来使其恢复可操作的性质。

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

posted @ 2016-02-03 10:35  lvyi  阅读(7330)  评论(0编辑  收藏  举报