CSS 鼠标点击穿透Div

html-css021

CSS 鼠标点击穿透Div,第1张

CSS 鼠标点击穿透Div

有些时候网页中用到了一些绝对定位的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')

将样式写在css里。不要写在img标签里。同样，在外部写js,,我写的是jquery的。css如下：

<style type="text/css">

img {opacity:0.4filter:alpha(opacity=40)}

</style>

将这个保存为layout.css。在html里如下调用

<link rel="stylesheet" type="text/css" href="../layout.css">

也可以不用css，将下面js代码里我注释掉的那一行取消注释，跟用css的效果一样。

js如下：

<script type="text/script">

$(function(){

//$("img").css("opacity","0.4")

$("img").hover(function(){

$(this).css("opacity","1")

},

function(){

$(this).css("opacity","0.4")

})

})

</script>

将这个js保存为imghover.js。然后再html里如下调用

<script src="。。/jquery-1.4.2.min.js" type="text/javascript"></script>//自己下一个jquery-1.4.2.min.js。

<script src="。。/imghover.js" type="text/javascript"></script>

Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性，IE6/7/8/9都不支持（IE11又支持，不过很好的一点是在ie中给a加disabled 点击事件自动无效。），Opera在SVG中支持。 但是 该属性HTML中 不支持

1、提交页面，提交按钮点击后，添加这个样式属性（style="pointer-events"），来防止重复提交

2、让链接不能点击

3、让鼠标点击穿透上方的 div