IE 浏览器下，透明的元素与另一非空白的元素重叠时（透明的元素在上，非空白的元素在下），
如果上方透明元素与下方元素中非空白的部分存在重叠（该元素的内容很可能不是填充满该元素的），则在该重叠区域发生的交互操作和鼠标事件由下方的元素接管，透明的元素不能触发鼠标事件。
上方的透明元素是指：无背景(background:none、transparent)，无可见内容(如 display none,visibllity hidden,left:-9999px; 不包括 opacity)
下方的非空白元素是指：该元素包含文字、图片等可见内容， 但背景图片和背景颜色不算入内。
IE 下 透明元素背后的文字可以被选中，图片可以另存为，鼠标事件可以触发，超链接可以点击，的确是为用户的交互操作着想
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <title>test</title> <style> .ad-gallery{ position: relative; width: 400px; height: 350px; overflow: hidden; } .ad-gallery .ad-prev,.ad-gallery .ad-next{ position: relative; display: inline-block; *display: inline; *zoom:1; float: left; width:200px; height: 100%; z-index:100; background-image: url('about:blank'); /* IE ，与元素重叠的区域为 img（该元素在上img在下),且该元素无背景(background:none、transparent)，无可见内容(如 display none,visibllity hidden,left:-9999px; ) ,则该区域无法触发鼠标事件 */ } .ad-gallery .prevHandle ,.ad-gallery .nextHandle{ position:absolute; left:0; right: 0; top: 0; bottom: 0; margin:auto; *top:50%; *left:50%; *margin-left: -50px; *margin-top: -75px; width: 100px; height: 150px; line-height: 150px; background: #313131; font-size: 14px; text-align: center; color: #ddd; background: #313131; display: none; /*visibility: hidden;*/ /*left:-9999px; */ } .ad-gallery .ad-img{ position: absolute; top:0; left:0; z-index: 0; width: 100%; height: 100%; } .ad-gallery .desc{ position: absolute; left: 0px; bottom: 0px; margin:0; width: 100%; height: 50px; line-height: 50px; background: #313131; color: #eee; text-indent: 10px; z-index: 99; } .opacity60{ *filter:alpha(opacity=60);/*IE6、7*/ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=60)"; /*IE8*/ opacity: 0.6; } </style> </head> <body> <div id="gallery" class="ad-gallery"> <img class="ad-img" src="http://images.cnblogs.com/cnblogs_com/ecalf/431722/o_7_4c135bd08efea.jpg" /> <div class="ad-prev"><div class="prevHandle opacity60">上一张</div></div> <div class="ad-next"><div class="nextHandle opacity60">下一张</div></div> <div class="desc opacity60">image description</div> </div> <!--test--> <div style="position:relative;100px;height:111px;border:1px solid red;overflow:hidden;"> <img id="elm1" class="ad-img" width="100" height="50" style="display:block;position:absolute;left:0;top:0;z-index:1;" src="http://images.cnblogs.com/cnblogs_com/ecalf/431722/o_7_4c135bd08efea.jpg" onmouseover="alert(this.id);" /> <!--change elm2's background to test--> <div id="elm2" style="position:absolute;left:0;top:0;z-index:10;111px;height:100px;border:1px solid green;background:transparent;" onmouseover="alert(this.id);"></div> </div> <script> var gallery = document.getElementById("gallery"); var elmInGallery = gallery.getElementsByTagName("*"); var mouseover = function(event){ event = event||window.event; var target = (event.srcElement||event.target); console.log('============= event log ==============='); console.log('1. ',this.className,' | ',target.className,' | ',target==this?'eventSrc':'eventTraval'); if((/ad-prev|ad-next/).test(this.className)){ console.log('2. ','handle active'); this.getElementsByTagName("div")[0].style.display = "block"; } }; for(var i=0;i<elmInGallery.length;i++){ elmInGallery[i].onmouseover = mouseover; } </script> </body> </html>