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

1、新建一个HTML文件,文件名为test.html,title标题为"CSS实现鼠标经过导航的超链接时显示下划线效果"。

2、在页面编写nav标签,在里面放三个超链接(首页、栏目一、栏目二),代码如下:

3、运行代码,效果如下:

4、使用css对导航的字体的字体大小、颜色、排列方式等进行美化,代码如下:

5、运行代码,效果如下:可见,经过CSS样式美化,鼠标经过的时候,显示蓝色。

6、利用CSS编写代码,实现鼠标经过时显示下划线效果,代码如下:

7、在浏览器运行代码,实现了想要的效果。