html - IE9/IE10 - 透明度问题

Question

我有一个页面，其中有一个位于另一个 div 之上的 div。顶部的div在大多数地方都设置为透明的，并且不捕获指针事件。我知道 IE 9 和 10 不支持 CSS pointer-events 属性，但是当底层 div 没有任何内容时，我在 IE 9 和 10 中看到一些奇怪的行为。在那些情况下，它根本不抓取鼠标事件。如果有边框或一些文本内容悬停在边框或内容上，但在元素的空白处不起作用。我试过使用透明背景图像，但这似乎不起作用。我已将链接附加到重现问题的基本 fiddle 。

HTML:

<div class="topElement"></div>
<div class="bottomElement">Works in IE 9 and 10 only if you hover over text or border.</div>

CSS:

.topElement {
    position:absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    z-index: 2;
}
.bottomElement {
    position:absolute;
    width: 100%;
    height: 100%;
    border: 3px solid black;
    background: transparent 0 0 repeat scroll url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBR??AA7");
}
.bottomElement:hover {
    background-color: red;
}

http://jsfiddle.net/MLundin617/jpr3j8jb/4/

当您将鼠标悬停在该区域上时，该区域应该会变成红色。

Answer 1

您必须将 z-index 写入 ".bottomElement">=2