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

WebAdvocate 2010-09-09 05:04:15

加精

遮挡
关于是否被遮挡的判断，可以从对层叠级别的判断而确定。见：说说标准——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的神奇之处。
截图：

详细的效果图，看原文中问题分析部分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之间。

详细的效果图，看原文中问题分析部分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

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

...全文