比如大家常看到的鼠标移入图片中，会有一个挡住图片的黑色半透明遮罩层，上面还有文字介绍，这时候就会遇到该层遮挡住下面图片的跳转链接事件，这时候怎么办呢？有个简单的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. 后缀自动机(SAM) ：SPOJ LCS - Longest Common Substring

    LCS - Longest Common Substring no tags  A string is finite sequence of characters over a non-empty f ...

  2. 【数学相关、规律】Codeforces 696B Puzzles

    题目链接: http://codeforces.com/problemset/problem/696/B 题目大意: 给一棵树,从根节点开始递归,time=1,每次递归等概率随机访问这个节点的子节点, ...

  3. Mac下Shell快捷键

    ctrl+a //移到行首 ctrl+e //移到行尾 ctrl+y // 插入最近删除的单词或语句 ctrl+k //删除光标处到行尾部分 ctrl+u //删除光标处到行首部分 ctrl+w // ...

  4. Container With Most Water——LeetCode

    Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai).  ...

  5. Maximum Subarray——LeetCode

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  6. HDOJ(HDU) 2162 Add ‘em(求和)

    Problem Description Write a program to determine the summation of several sets of integers. Input Th ...

  7. QQ互联 回调地址

    http://wiki.connect.qq.com/%E5%9B%9E%E8%B0%83%E5%9C%B0%E5%9D%80%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98% ...

  8. 2012 B 中国近现代史纲要》课程期末考试试卷

    湖南人文科技学院2013年3月公共课 2011级<中国近现代史纲要>课程期末考试试卷B 考核方式:(开卷)                                    考试时量: ...

  9. maven上传自定义jar到本地仓库

    mvn install:install-file  -Dfile=D:/baidu/ueditor-1.1.1.jar  -DgroupId=com.baidu.ueditor  -Dartifact ...

  10. 关于连不上dc服务器的机器强行退出域的方法

    有时加入域的计算机无法连接到之前的域了,只能强制退出域了,有两个前提条件:   1.断开网络,就是拔掉网线或者禁用网卡.   2.使用本地管理员登陆.   然后命令行执行如下命令即可:   netdo ...