CSS 鼠标点击穿透Div

html-css012

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样式,我第一想法就是直接在组件上新增一个自定义的class去覆盖原有的样式,结果当然是行不通的(不然我现在也不会在这里写这篇)。 于是我查了一下,是因为我在vue组件里面将设置成了局部样式,局部样式只在当前组件生效,对引入的其他组件是无法起作用的。然后我试了一下,把 scoped 去掉就行了。 或者在组件里面写多一份全局样式 但是如果不在style里面写 scoped ,直接写成全局样式,最后可能会面临多个组件之间样式污染的问题。如何使得局部样式可以覆盖到引入的第三方组件呢,我想到以前涉及过的一个名词 样式穿透 ,立刻实践了一下,果然就成了。样式穿透 需要定义一个外层的style,通过 >>>可以使得socped属性下的的样式穿透到全局, 外层 >>>第三方组件 或者 外层 /deep/ 第三方组件 。 >>>是 /deep/ 的别名,但是在sass之类的样式预处理器之中无法正确解析。

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