有些时候网页中用到了一些绝对定位的Div,因为需要事先这个Div是隐藏的,但是它所在的位置会遮挡住鼠标点击事件。这个时候可以用CCS3中的pointer-events属性来解决。
 
//穿透该层
pointer-events:none;
 
//恢复点击处理
pointer-events:auto;
 
根据情况来动态修改Div的pointer-events属性即可。
例如用JQuery可以这样写:
 
//穿透该层
$('#dvTest').css('pointer-events', 'none'); 
或者
恢复点击处理
$('#dvTest').css('pointer-events', 'auto'); 

css3鼠标点击穿透--摘抄的更多相关文章

  1. jquery鼠标点击穿透的解决方法

    jquery鼠标点击穿透的解决方法 <pre><div class="showcontainer" style="background:#000;dis ...

  2. pointer-events属性屏蔽鼠标事件(点击穿透上层元素)

    应用场景 我们在 HTML 开发时可能会遇到这样的情况:页面上有一些元素使用绝对定位布局,这些元素可能会遮盖住它们位置下方的某个元素的部分或者全部.默认情况下,下方元素被遮挡的部分是不会响应鼠标事件的 ...

  3. 说说移动端web开发中的点击穿透问题

    最近一直在忙于一个无线端的项目,由于之前主要工作都是在桌面端,移动端接触的比较少,所以中间遇到了很多的坑,做一个简单的记录. 问题背景 需求中有这样的一个功能,点击取件信息的时候会弹出一个地址列表的浮 ...

  4. CSS3鼠标滑过图标放大以及旋转

    本人是HTML5-CSS3初学者,这次分享一款纯CSS3实现的图片动画,当鼠标滑过小图标时,图标会放大,同时图标会出现旋转的动画效果.我们在很多个性化个人博客中经常看到鼠标滑过人物头像后头像图片旋转就 ...

  5. CSS3鼠标滑过动画线条边框特效

    基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...

  6. CSS3鼠标悬停图片上浮显示描述代码

    效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...

  7. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  8. 点击穿透问题(http://www.tuicool.com/articles/6NfaUnM)

    一.click与300ms延迟 移动浏览器提供一个特殊的功能:双击(double tap)放大 300ms的延迟就来自这里,用户碰触页面之后,需要等待一段时间来判断是不是双击(double tap)动 ...

  9. HTML5+CSS3鼠标悬停图片特效

    点击预览效果            下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...

随机推荐

  1. flask--Django 基本使用

    #导入flaskfrom flask import Flask #创建应用 app = Flask(__name__) #创建根路径视图 @app.route('/') def hello_world ...

  2. AOP日志组件 多次获取post参数

    AOP日志组件 多次获取post参数 需求:新增接口日志组件.通过拦截器对接口URL进行拦截处理,然后将接口post请求的参数与结果,写入日志表. 问题:POST方法的参数是存储在request.ge ...

  3. ios之UIActionSheet

    UIActionSheet是在IOS弹出的选择按钮项,可以添加多项,并为每项添加点击事件. 为了快速完成这例子,我们打开Xcode 4.3.2, 先建立一个single view applicatio ...

  4. POJ 2255 Tree Recovery——二叉树的前序遍历、后序遍历、中序遍历规则(递归)

    1.前序遍历的规则:(根左右) (1)访问根节点 (2)前序遍历左子树 (3)前序遍历右子树 对于图中二叉树,前序遍历结果:ABDECF 2.中序遍历的规则:(左根右) (1)中序遍历左子树 (2)访 ...

  5. GIMP永久保存选择的办法

    选择选区,然后把选区放到channel里面去 这是一张已经选择好的选区的图片 然后选择select下的Save to Channel, 需要这部分选区的话,只需要点击这个按钮就可以了

  6. perl学习之:肯定匹配和否定匹配

    tr/ / / 替换操作符不支持正则表达式 也不具备双引号替换能力m/ /  s/ / / 都支持正则表达式,并且可以提供或限制双引号替换能力 $string = "25abc8" ...

  7. Web框架之Django_08 重要组件(form组件、cookie和session组件)

    摘要: form组件 cookie组件 session组件 一.form组件 form介绍我们之前在html页面中利用form表单向后端提交数据时候,都需要对用户的输入进行校验,比如校验用户是否输入正 ...

  8. 避免使用aireplay-ng指令时出现AP通道不对的方法

    本方法搜集网络:具体使用为在调试网卡为监听模式,使用airodump-ng指令扫描wifi后,需要先执行"airmon-ng stop wlan0"指令,然后再进行一系列抓包等操作 ...

  9. Python数据分析库之pandas,你该这么学!No.1

    写这个系列背后的故事 咦,面试系列的把基础部分都写完啦,哈哈答,接下来要弄啥嘞~ pandas吧 外国人开发的 翻译成汉语叫 熊猫 厉害厉害,很接地气 一个基于numpy的库 干啥的? 做数据分析用的 ...

  10. 并查集--poj 2492

    Background Professor Hopper is researching the sexual behavior of a rare species of bugs. He assumes ...