有些时候网页中用到了一些绝对定位的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>
