Question

我在这里有一个jsfiddle - http://jsfiddle.net/wERsY/ - 其中一个透明背景的框放在图像左上角的图像的一半上。图像和框绝对定位，并且框的z-index比图像高。

使用FF，Safari和Chrome时，当您将鼠标悬停在整个框上时会看到整个框（当您在框的任何部分上方时，光标变为指针）并单击该框会触发单击处理程序，从而转动盒红色。

但是对于IE（我正在运行IE10），只能看到图像上不的框的部分。如果将鼠标悬停在图像上方的框的部分上，则光标不会更改为指针，并且单击不执行任何操作。

如果你给盒子一个彩色背景，（取消注释CSS的第4行），那么IE会看到整个盒子，包括图像上的部分。

是否有人了解这里发生了什么以及如何在IE图像上点击透明框？

由于

HTML
<img id='pelican' src='http://s20.postimg.org/fpitivjl9/Pelican.jpg' alt="pelican"/>
<div id='clickBox'> </div>

CSS
div#clickBox {
    width:100px;
    height:100px;
/*    background-color:yellow; */
    cursor:pointer; 
    position:absolute;
    top:0px;
    left:0px;
    z-index=51; 
}
img#pelican {
    position:absolute;
    top:50px;
    z-index=50; 
}

jQuery
 $('#clickBox').click(function() {
        $(this).css({backgroundColor:'red'});
    })

Answer 1

IE中的

transparent非常透明，你看不到它，鼠标看不到它，如果有潜在的可见元素。

使用背景颜色和opacity: 0，并更改opacity而不是background-color。 A live demo at jsFiddle

IE无法识别图像上具有透明背景的框

1 个答案: