Question

我有一个页面，我有一个div位于另一个div上。 top div在大多数地方设置为透明，而不是捕获指针事件。我知道IE 9和10不支持CSS指针事件属性，但是当底层div没有任何内容时，我在IE 9和10中看到了一些奇怪的行为。在这些情况下，它根本不会抓取鼠标事件。如果边框或某些文本内容悬停在边框上或内容确实有效，但不在元素的空白处。我尝试过使用透明背景图像，但这似乎不起作用。我已将链接附加到可以重现问题的简单小提琴上。

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

IE9 / IE10 - 透明度问题

1 个答案: