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

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

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

解决css3遮罩层挡住下面元素事件的方法的更多相关文章

  1. 谷歌下解决Pop遮罩层无法遮挡滚动栏下问题

    今天用pop的弹出窗体里,出现一个问题,当网页出现滚动栏里,不能遮挡住,解决Pop遮罩层无法遮挡滚动栏下问题. 可通过下载获取改动后的代码----->进入下载

  2. vue 遮罩层阻止默认滚动事件

    vue中提供 @touchmove.prevent 方法可以完美解决这个问题. <div class="child" @touchmove.prevent ></ ...

  3. element-ui框架的el-dialog弹出框被遮罩层挡住了

    解决办法 在el-dialog标签里添加 :modal-append-to-body='false'

  4. vue解决遮罩层滚动方法

    vue 遮罩层阻止默认滚动事件 在写移动端页面的时候,弹出遮罩层后,我们仍然可以滚动页面. vue中提供 @touchmove.prevent 方法可以完美解决这个问题 <div class=& ...

  5. 弹出页面遮罩层，以及web端和移动端阻止遮罩层的滑动。

    最近项目遇到了遮罩层的一些问题,总结一下: 弹出遮罩层 遮罩层弹出有非常多的方法,这里只写出本人用的代码,使用jq操作dom的方法进行实现的. <style>.box{position:a ...

  6. element-ui遮罩层el-dialog的使用

    template <el-button type="text" @click="dialogVisible = true">点击打开 Dialog& ...

  7. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  8. 【js & jquery】遮罩层实现禁止a、span、button等元素的鼠标事件

    刚才在写一个界面,其中为了考虑背景图片的缘故,所以没用Button而是用的a标签 在点击之后应该禁用掉a元素,禁用对于button比较容易,加一个disabled就可以了 但是对于a却没有太好的办法, ...

  9. 转【js & jquery】遮罩层实现禁止a、span、button等元素的鼠标事件

    /*遮罩层代码 作用:通过遮罩层的方式防止表单提交次数过多 */ function MaskIt(obj){ var hoverdiv = '<div class="divMask&q ...

随机推荐

  1. cf702D Road to Post Office

    D. Road to Post Office time limit per test 1 second memory limit per test 256 megabytes input standa ...

  2. servlet简介

    web 开发分为两种:静态开发(使用html)和动态开发(使用servlet/jsp,jsp就是servlet,ASP ,PHP) 所以servlet是sun公司提供的一门专门用于开发动态web资源的 ...

  3. Java内存管理以及各个内存区域详解

    一.概述 原文链接:http://blog.csdn.net/l271640625/article/details/39761439 Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若 ...

  4. msyql 字节问题

    MySQL 数据库的varchar类型在4.1以下的版本中的最大长度限制为255,其数据范围可以是0~255或1~255(根据不同版本数据库来定).在 MySQL5.0以上的版本中,varchar数据 ...

  5. isEqual,isEqualTostring,==三者的区别

    isEqual:首先判断两个字对象的类型是否相同,在判断内容是否相同,如果类型不同直接return no.如先判断是否都是 NSString,在判断string的内容. isEqualTostring ...

  6. 【wpf基础】wpf MediaElement全屏播放视频功能

    最近在研究如何将视频全屏播放,一开始思路A:弹窗将MediaElement对象add到一个新的全屏窗体,报错 指定的元素已经是另一个元素的逻辑子元素.请先将其断开连接. 后续转换思路B:将本窗体其他控 ...

  7. 山东省赛J题：Contest Print Server

    Description In ACM/ICPC on-site contests ,3 students share 1 computer,so you can print your source c ...

  8. 常用颜色大全---RGB值及中英文名称

    ■■■■■ #DC143C Crimson 深红/猩红 ■■■■■ #FFF0F5 LavenderBlush 淡紫红 ■■■■■ #DB7093 PaleVioletRed 弱紫罗兰红 ■■■■■ ...

  9. POJ 2891 扩展欧几里德

    这个题乍一看跟剩余定理似的,但是它不满足两两互素的条件,所以不能用剩余定理,也是给了一组同余方程,找出一个X满足这些方程,如果找不到的话就输出-1 因为它不满足互素的条件,所以两个两个的合并,最后合成 ...

  10. 转：SVN使用教程总结

    转自:http://www.cnblogs.com/tugenhua0707/p/3969558.html SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生成很多不同的版 ...