[转] 让DIV遮住的链接可以点击

HTML制作中，如果在一个链接或者文字上再有一层DIV的话的，会导致当前的链接或者文字无法选中或者点击。这种情况在Firefox和Chrome
里会发生，但是在IE里居然没有问题。有人会想到用z-index
来解决，给下层的文字或者链接的z-index设一个大值，给上层的div设置一个小值，但是实际上用过这个方式是无法实现我们需要的结果的。

要解决这种问题，可以在上层的DIV加一个样式：

pointer-events: none;

有了这个样式，可以让浏览器忽视此DIV。此样式属于CSS3，Firefox 3.6+和chrome 2.0+ 以及safari
4.0+都支持这个属性，IE6/7/8/9都不支持，所以设置以后所有的浏览器都可以正常使用了。

另外，如果在上层的DIV中，如果有一些DOM还是需要维持原有的效果，那么可以单独给这些DOM设置：pointer-events:auto

转自：http://www.ityizhan.com/enable-to-click-the-link-under-div/

时间： 2024-10-17 18:36:57

[转] 让DIV遮住的链接可以点击的相关文章

JS遮罩层——如何使被遮罩后的链接可以点击

在遮罩层的使用过程中,发现了一个问题,如果有一个有<a></a>标签链接的HTML页面,如果使用JS遮罩层将此HTML页面遮罩,则此链接无法点击:如果要使此链接可以点击,则需要在<a></a>标签中添加style属性“position:relative;”,例如: 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title>DIV CS

关于ie6中使用css滤镜[_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=&#39;images/*.png&#39;,sizingMethod=&#39;scale&#39;)]后链接无法点击的问题

RT,我做的一个效果是试用png图做背景,通过_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/*.png',sizingMethod='scale');来实现,但是使用这个滤镜后,ie6下面的链接.按钮等都失效,无法点击网上搜索很多都是通过给链接加上position:relative;解决 不知道是我ie6绿色版本问题还是其他原因,我代码中加上这句无效…… 另:png透明的层我设置了绝对定位,貌似这个导

如果拦截WebView的错误和OS升级到4.4后链接不能点击的问题

android OS升级到4.4之后,有些WebView的链接我们点击无效了,下面可以解决其中的某一种情况: webviewClient的shouldOverrideUrlLoading方法必须返回false,返回true会导致这个问题 有时候PM会有一种需求,如果不是Server那边的问题,那么想在界面上显示自定义的错误(如遇到连接到WIFI CMCC而没有移动的密码,手机显示着连接上了WIFI) 这时我们需要去截获WebView的error,可以通过重载setWebViewClient的方法

Div+Css(2):纯Div+Css制作的漂亮点击按钮和关闭按钮

纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片. 值得注意三点: 1.其中,主要使用了rotate.它能让文字旋转角度 2.还有radius,做圆角专用,很好用的属性.给想我这样的人省去了作图的时间. 3.W3C标准中对CSS3的transition这是样描述的:"CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值." 1 &

链接被点击的默认行为——带到另一个窗口

图片链接被点击时,默认会被带到图片查看窗口. 在给某个元素添加了事件处理函数后,一旦事件发生,相应的JavaScript代码就会得到执行.被调用的javascript函数可以返回一个值,这个值将被传递给那个事件处理函数. 以onclick为例,链接被点击时, 如果javascript代码返回的值是true,onclick事件处理函数就认为“这个链接被点击了.”如果javascript代码返回的值是false,onclick事件处理函数就认为“这个链接没有被点击”. 代码示例: <li><

Android TextView中链接(link)点击事件的截取

布局文件xml 1 <TextView 2 android:layout_width="match_parent"3 android:layout_height="match_parent"4 android:id="@+id/test_note"5 android:autoLink="all"6 /> 这里autoLink="all"就是链接所有类型的,包括网址,电话,邮件地址什么的. Jav

checkbox复选框和div click事件重叠，点击div后复选框也被选中，同时改变div颜色，否则则不选中

 checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { display: inline-block; width: 100px; margi

div锚点链接跳转

a标签href可跳转到知道dom节点(通过id) 代码 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <title>锚点链接</title> <script src="https://apps.bdi

jQuery EasyUI 将单元格改为链接 可点击

看图,点击之后可以直接访问 方法是 <th field="url" width="50" formatter="formatPrice" > 下载链接 </th> 有一个 formatter 属性, function formatPrice(val, row) { return '<a style="color:red;" href="' + val + '">点击下载'