比如大家常看到的鼠标移入图片中，会有一个挡住图片的黑色半透明遮罩层，上面还有文字介绍，这时候就会遇到该层遮挡住下面图片的跳转链接事件，这时候怎么办呢？有个简单的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. 【转】C/C++ 内存对齐

    [转自]http://wenku.baidu.com/view/8eaaa26925c52cc58bd6bed2.htmlC/C++内存对齐 一.什么是字节对齐,为什么要对齐? 现代计算机中内存空间都 ...

  2. C语言的强制类型转换

    1.什么是强制类型转换:遇到一些类型不同的一些数据之间的表达运算 ,需要将较高的数据类型转换成较低类型时. 2.强制类型的形式: (强制转换的类型)(表达式): 2.强制类型的使用: float a, ...

  3. HDOJ(HDU) 2317 Nasty Hacks(比较、)

    Problem Description You are the CEO of Nasty Hacks Inc., a company that creates small pieces of mali ...

  4. 代码审查工具之PMD操作指南

    上周客户要求对OA系统的代码质量进行了一个整体审查,并且要出一份报告给领导. 为此花了半天时间把代码审查工具PMD琢磨了下,现将具体操作步骤描述如下,以供大家参考! 1 前言 质量是衡量一个软件是否成 ...

  5. HDU1050（Moving Tables:贪心算法）

    解题思路: 这种做法是基于hdu2037的做法上考虑的,找出所有可以同时搬运的桌子,然后就很方便求出最短总时间. 还有一种更简单的做法是直接遍历一遍找出与别的重复次数最多的那片区域,重复次数*10就可 ...

  6. Redis sort命令

    http://www.cnblogs.com/linjiqin/archive/2013/06/14/3135921.html 1.添加 投票选项到 redis的  List 和HashMap lis ...

  7. [PWA] 6. Hijacking response

    For example, if the url is not match to any API endpoint, we want to return 404 error message. So fi ...

  8. Git 版本控制工具使用介绍------Windows系统下使用

    Git 是用于 Linux内核开发的版本控制工具.与常用的版本控制工具 CVS, Subversion 等不同,它采用了分布式版本库的方式,不必服务器端软件支持(wingeddevil注:这得分是用什 ...

  9. iOS异步图片加载优化与常用开源库分析

    网络图片显示大体步骤: 1.下载图片: 2.图片处理(裁剪,边框等): 3.写入磁盘: 4.从磁盘读取数据到内核缓冲区: 5.从内核缓冲区复制到用户空间(内存级别拷贝): 6.解压缩为位图(耗cpu较 ...

  10. Windows与Linux文件共享

    Windows与Linux文件共享 Samba服务器 安装Samba服务器 rpm –ivh /mnt/Packages/Samba-3.5.10-125.el6.i686.rpm 添加用户并修改密码 ...