CSS3 pointer-events（阻止hover、active、onclick等触发事件）

html-css018

CSS3 pointer-events（阻止hover、active、onclick等触发事件）,第1张

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

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')

#hoverpage ul#outer li.page div a:hover {text-decoration:none}

id为hoverpage 元素下的UL下的COUTER下的LI样式为PAGE 下的DIV下的A，鼠标移动上去的时候，text-decoration为NONE，没有任何修饰

#hoverpage ul#outer li.page a:hover {white-space:normal}

HOVERPAGE 下的UL的ID为OUTER下的LI样式名为PAGE下的A

#hoverpage ul#outer :hover div {position:absoluteleft:0top:0}

这句是同上某某下的，最后hover div的意思是OUTER鼠标移上后，它里面的层的样式：

相对定位，LEFT0 TOP0