CSS 扩大可点击区域(热区)

html-css020

CSS 扩大可点击区域(热区),第1张

目的: 想给一个简单的小按钮扩大其热区在四个方向上均向外扩张10px

解决方案:

可以将伪元素设置为任何尺寸位置或形状甚至是脱离原来的位置

案例如下,或者参考网址 play.csssecrets.io/hit-area

原文

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