被透明元素遮挡的元素还可以被点击到吗?

遮挡
关于是否被遮挡的判断，可以从对层叠级别的判断而确定。见：说说标准——CSS核心可视化格式模型(visual formatting model)之十三：分层的显示(Layered presentation)

透明
一个元素被某个元素遮挡，可以透过遮挡元素完全看到被遮挡元素，那么，可以说遮挡元素是完全透明的。       
让元素完全透明有两种方式：   
   1. 背景色为'background-color:transparent'。设置背景色为透明，如 'background-color:transparent'。事实上 'background-color' 的默认值即为 'transparent'；这种是背景默认颜色，未设置的背景都是这个值。
   2. 背景是图片或某种颜色。这时，可以采用 'opacity:0'（标准），或采用滤镜 'filter:alpha(opacity=0)'（仅 IE 支持）。

各位童鞋可以试试看哈，透明！

被透明物遮挡
理论上讲，被透明物遮挡就好像在那个元素上垫了一层超干净的玻璃，可以看，但不可以摸。
也就是说，如果一个元素被另一个元素遮盖后，不论遮盖元素的背景色是否是 'transparent'，也不论遮盖元素的透明度是否为全透明，被遮盖元素是不能响应用户的鼠标事件的。
A 被 B 覆盖，A 就被 B 隔离了，鼠标的小手就摸不到A了。
呃，，因为有IE，所以，我只能说：按道理讲是这样的……

实例
'background-color:transparent'的透明方式

<style type="text/css">
    body {
       margin: 30px;
    }
 
    a {
       color: blue;
    }
 
    a:hover {
       color: red;
    }
</style>
 
<div>
    <a href="javascript:void(0);"
      onmouseover="this.style.backgroundColor='yellow'"
      onmouseout="this.style.backgroundColor='transparent'">
       please put your mouse on
    </a>
 
    <div style="height:20px; width:190px; margin-top:10px; background-color:blue;"
        onmouseover="this.style.backgroundColor='red'"
        onmouseout="this.style.backgroundColor='blue'"></div>
    <div style="background-color:transparent;position:absolute;left:10%;top:23px;
                   border:10px solid green;width:100px;height:80px;"></div>
</div>

大家可以自行实验一下，点一下被绿色的框筐套住的文字 和 那段蓝色的 DIV。看看IE的神奇之处。
截图：
[img=https://lh4.googleusercontent.com/m6lkGqXWCRU6JkJ0MFT3hMOjsFvdyRJbLHMpN7FMfkrxVIJoyx-omyxYYfsVMgmBBaAHtRJaUMaUjU0kTrMJ_hhCWK6mLcoJ3HmOwW6Xq0worQhxiQ][/img]
详细的效果图，看原文中问题分析部分2.1的截图：[http://www.w3help.org/zh-cn/causes /BT9029#analysis_of_issues]http://www.w3help.org/zh-cn/causes/BT9029#analysis_of_issues[/url]
'opacity' 或 'filter:alpha' 为0的透明方式

 

<style type="text/css">
body{margin:0;}
a{color:blue;}
a:hover{color:red;}
</style>
<div style="position:relative;margin:50px;width:300px;">
  <a href="javascript:void(0);"
          onmouseover="this.style.backgroundColor='yellow'"
          onmouseout="this.style.backgroundColor='transparent'">
          please put your mouse on
  </a>
  <div style="height:20px; width:190px; margin-top:10px; background-color:blue;"
          onmouseover="this.style.backgroundColor='red'"
          onmouseout="this.style.backgroundColor='blue'"></div>
  <div style="opacity:0;filter:alpha(opacity=0);background-color:green;
                  position:absolute;left:10%;top:-23px;
                  border:10px solid green;width:100px;height:80px;"></div>
</div>

 

这时候，整个元素透明了，所以，连border也看不到了。各位同学可以自己点点看，被遮盖的分界处在 please 的a和s之间。
[img=https://lh4.googleusercontent.com/Qs5qVxeUNufMzCGzXLv8Ycopw-iBpimeb52yAItyqAyKpzhmPwvxMXa8eY0sb0Cou-j6BIVghhOUthXGeGCB8QPTVkDmhmNe1lElUZySifNNQaJPyw][/img]
详细的效果图，看原文中问题分析部分2.2的截图：[http://www.w3help.org/zh-cn/causes /BT9029#analysis_of_issues]http://www.w3help.org/zh-cn/causes/BT9029#analysis_of_issues[/url]

结论
在 IE6 IE7 IE8 下，当遮挡元素的 'background-color' 为 'transparent' 时，其下被遮挡的行内元素可响应鼠标事件，而块级元素则不能。而在其它浏览器下，被遮挡的元素都无法响应鼠标事件，无论它是块级元素还是行内元素。

解决方案
参照：http://www.w3help.org/zh-cn/causes/BT9029 的解决方案部分

解决方案原文
http://www.w3help.org/zh-cn/causes/BT9029 

更多兼容性问题：
【分享】浏览器兼容性问题目录

 

 

原文链接 > https://bbs.csdn.net/topics/350040973