比如大家常看到的鼠标移入图片中，会有一个挡住图片的黑色半透明遮罩层，上面还有文字介绍，这时候就会遇到该层遮挡住下面图片的跳转链接事件，这时候怎么办呢？有个简单的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. 搜索（四分树）：BZOJ 4513 [SDOI2016 Round1] 储能表

    4513: [Sdoi2016]储能表 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 395  Solved: 213[Submit][Status] ...

  2. 数学(组合，容斥)：COGS 1220. 盒子与球

    1220. 盒子与球 ★   输入文件:boxball.in   输出文件:boxball.out   简单对比 时间限制:1 s   内存限制:128 MB [问题描述] 现有r个互不相同的盒子和n ...

  3. SCU 4436 Easy Math 2015年四川省赛题

    题目链接:http://acm.scu.edu.cn/soj/problem/4436/ 题意:给你n个整数,求这n个数的平方根和是否是一个整数: 解题思路:如果这题每个数给他算出来,必然费时间,可能 ...

  4. 自定义WCF的配置文件

    原文地址:http://www.cnblogs.com/shanyou/archive/2008/12/02/1346298.html WCF的承载既可以通过编码实现,也能够通过配置实现.而且使用配置 ...

  5. PHP学习之［第07讲］PHP5.4 文件操作函数 之 图片计数器的实例

    1.filetype():输出文件类型: 2.stat():获取文件的基本属性的数组: 3.clearstatcache().is_executable().isDir().idFile().scan ...

  6. TCP/UDP 、HTTP、IP 、socket 的关系。

    网络有上下分为7 层.物理层,数据链路层.网络层.会话层.应用层.传输层: IP协议位于网络层,IP和端口来控制网络流向: TCP.UDP是基于传输层.TCP保证三次握手.传递数据: UDP为不考虑是 ...

  7. SQL中存储过程中使用事务,并且加入异常处理机制.

    --存储过程中使用事务,并且加入异常处理机制. -- ============================================= CREATE PROCEDURE [dbo].[UP_ ...

  8. DateGridew导出Excel表+常见错误提示

    在敲机房收费系统的时候,显示数据的时候需要将DateGridew 中的数据导出进Excel表.DateGridew导出Excel表是比较常见的,当然导出Excel表有很多种方法,下面是个人认为比较容易 ...

  9. git的一些概念和技巧

    1. 分支代表最后三个commit(即HEAD, HEAD^和HEAD~2),前一个commit,也用HEAD~1 2. 查看一个文件的改动历史git log (--pretty=oneline) - ...

  10. Oracle 存储过程(2)

    http://www.cnblogs.com/chinafine/archive/2010/07/12/1776102.html http://blog.itpub.net/29485627/view ...