如何使上层的div遮住的链接可以点击
pointer-events属性
http://www.css88.com/book/css/properties/user-interface/pointer-events.htm
在上层的div中加入这个属性,pointer-events:none; 能很好的解决这个问题。
pointer-events:auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all
默认值:auto
适用于:所有元素
继承性:有
动画性:否
计算值:指定值
取值:
- auto:
- 与pointer-events属性未指定时的表现效果相同。在svg内容上与
visiblepainted值相同 - none:
- 元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
- 其他值只能应用在SVG上。
说明:
- 使用
pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标,那么指向该元素的任何事件在事件传播过程中都将通过父元素,并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获(将会穿过父元素而指向位于其下面的元素)。 - 对应的脚本特性为pointerEvents。
兼容性:
- 浅绿 = 支持
- 红色 = 不支持
- 粉色 = 部分支持
| Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 6.0-10.0 | 2.0-3.5 | 4.0+ | 6.0 | 15.0 | 6.0 | 2.1+ | 18.0+ |
如何使上层的div遮住的链接可以点击的更多相关文章
- Html中DIV成为超级链接,解决在360浏览器+IE9显示小手图标的兼容性!
Html中DIV成为超级链接,解决在360浏览器+IE9显示小手图标的兼容性! <div style="cursor:pointer;" onclick="sele ...
- 如何禁用事件的浮升(div的子元素的点击事件会触发父元素的点击事件)
<div onclick="alert();"> <div onclick="alert();"></div> </d ...
- 转:alphaImageLoader滤镜加载后 链接不能点击
我是一个很少使用IE滤镜,也是一个不赞成使用IE滤镜的前端工程师.不过今天有一个朋友给我发来了一个有关于IE6的BUG,就是在IE6中使用了AlphaPNG透明的IE滤镜之后,a链接不能够点击.具体情 ...
- 假设拦截WebView的错误和OS升级到4.4后链接不能点击的问题
android OS升级到4.4之后,有些WebView的链接我们点击无效了,以下能够解决当中的某一种情况: webviewClient的shouldOverrideUrlLoading方法必须返回f ...
- 【IE6的疯狂之十三】IE6下使用滤镜后链接不能点击的BUG
大家可能都知道IE6下使用DXImageTransform.Microsoft.AlphaImageLoader滤镜(用于PNG32 Alpha透明)后链接不能点击的BUG,大家也都知道只要在a标签上 ...
- Android TextView中链接(link)点击事件的截取
布局文件xml <TextView package com.jayce.testlink; import android.net.Uri; import android.os.Bundle; i ...
- 纯Div+Css制作的漂亮点击按钮和关闭按钮
纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.
- checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中
checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang=" ...
- div锚点链接跳转
a标签href可跳转到知道dom节点(通过id) 代码 <!DOCTYPE html> <html> <head> <meta name="view ...
随机推荐
- HDU1712简单的分组背包
HDU1712http://acm.hdu.edu.cn/showproblem.php?pid=1712 简单的分组背包 #include <map> #include <set& ...
- URAL 2070 Interesting Numbers (找规律)
题意:在[L, R]之间求:x是个素数,因子个数是素数,同时满足两个条件,或者同时不满足两个条件的数的个数. 析:很明显所有的素数,因数都是2,是素数,所以我们只要算不是素数但因子是素数的数目就好,然 ...
- Linux目录介绍
/: 根目录,一般根目录下只存放目录,不要存放文件,/etc./bin./dev./lib./sbin应该和根目录放置在一个分区中/bin:/usr/bin: 可执行二进制文件的目录,如常用的命令ls ...
- java设计模式(装饰模式)
装饰模式实现了可以动态地为原对象扩展方法 装饰对象与被装饰的都实现了同一个接口(或抽象类) 举个例子: 工作 可以边吃东西边工作,也可以边喝东西边工作,还可以工作的时候边吃边喝 创建共同接口 Work ...
- c++中的signal机制
简介 signal是为了解决类之间通信的问题而出现的,更深入的原因是面向对象讲究封装,但是封装必然导致类之间沟通困难,但是使用接口的方式又太重量级--需要写很多代码,而且会导致接口爆炸 比如你需要把一 ...
- MFC程序中消息以及函数的处理顺序简介[转]
MFC应用程序中处理消息的顺序 1.AfxWndProc() 该函数负责接收消息,找到消息所属的CWnd对象,然后调用AfxCallWndProc 2.AfxCallWndProc() 该 ...
- 移动端类似IOS的滚动年月控件(需要jQuery和iScroll)
一. 效果图 二. 功能介绍 支持滚动和点击选择年月.(目前只支持设置年月的最大最小值,不支持整体的最大最小值) 三. 代码 1. 在你的html中添加如下代码: 直接加载<body>里面 ...
- php资料站
Veda 原型:http://www.nowamagic.net/librarys/veda/cate/PHP
- cocos2dx libcurl
转自:http://www.himigame.com/curl-libcurl/878.html 本篇介绍使用libcurl编程的一般原则和一些基本方法.本文主要是介绍 c 语言的调用接口,同时也可能 ...
- Swift学习资源
原文: http://leancodingnow.com/swift-learning-resources/ Swift是Apple在今年的WWDC推出的一门新的编程语言,它的1.0版本跟着Xcode ...