CSS 鼠标点击穿透Div

html-css011

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

复制代码试试：

<div class="xgt">

<div id="xgt_bd">

<div id="nav">

<a href="#" class="nav_button" id="button1" onmouseover="xgtt2.style.display='none'xgtt3.style.display='none'xgtt4.style.display='none'xgtt1.style.display='block'button2.className='nav_button'button3.className='nav_button'button4.className='nav_button'" onmouseout="this.className='nav_button_msout'">办公室装修效果图</a>

<a href="#" class="nav_button" id="button2" onmouseover="xgtt1.style.display='none'xgtt3.style.display='none'xgtt4.style.display='none'xgtt2.style.display='block'button1.className='nav_button'button3.className='nav_button'button4.className='nav_button'" onmouseout="this.className='nav_button_msout'">酒店装修效果图</a>

<a href="#" class="nav_button" id="button3" onmouseover="xgtt1.style.display='none'xgtt2.style.display='none'xgtt4.style.display='none'xgtt3.style.display='block'button1.className='nav_button'button2.className='nav_button'button4.className='nav_button'" onmouseout="this.className='nav_button_msout'">厂房装修效果图</a>

<a href="#" class="nav_button" id="button4" onmouseover="xgtt1.style.display='none'xgtt2.style.display='none'xgtt3.style.display='none'xgtt4.style.display='block'button1.className='nav_button'button2.className='nav_button'button3.className='nav_button'" onmouseout="this.className='nav_button_msout'">商铺装修效果图</a>

</div>

<div id="xgtt">

<div id="xgtt1">

<div class="xgt_list">

<div class="xgt_big_pic_top"><a href="#" target="_blank"><img src="images/zs.jpg" alt="国际168平米四居混搭风格 " /></a>

</div>

<div class="xgt_small_pic_left"><a href="#" target="_blank"><img src="images/zsxz.jpg" alt="18万打造148平春意田园家 " /></a>

</div>

<div class="xgt_small_pic_right"><a href="#" target="_blank"><img src="images/zsy.jpg" alt="上网游戏区空间设计" /></a>

</div>

</div>

<div class="xgt_list">

<div class="xgt_small_pic_left"><a href="#" target="_blank"><img src="images/zs.jpg" alt="网区装修效果图" /></a>

</div>

<div class="xgt_small_pic_right"><a href="#" target="_blank"><img src="images/zsxz.jpg" alt="装修效果图大全" /></a>

</div>

<div class="xgt_big_pic_bottom"><a href="#" target="_blank"><img src="images/zsxy.jpg" alt="装修效果图大全" /></a>

</div>

</div>

<div class="xgt_list">

<div class="xgt_big_pic_top"><a href="#" target="_blank"><img src="images/ys.jpg" alt="国际168平米四居混搭风格 " /></a>

</div>

<div class="xgt_small_pic_left"><a href="#" target="_blank"><img src="images/yxz.jpg" alt="18万打造148平春意田园家 " /></a>

</div>

<div class="xgt_small_pic_right"><a href="#" target="_blank"><img src="images/yxy.jpg" alt="上网游戏区空间设计" /></a>

</div>

</div>

</div>

<div id="xgtt2" style="display: none">显示第二部分内容</div>

<div id="xgtt3" style="display: none">显示第三部分内容</div>

<div id="xgtt4" style="display: none">显示第四部分内容</div>

</div>

</div>

</div>