javascript - 防止鼠标与透明元素背景交互

Question

我有一个基本的 html 元素，我有一个包含一些按钮的覆盖元素。

我希望鼠标能够与基本元素以及覆盖层中的按钮进行交互。

问题是覆盖捕获了基本元素的鼠标事件。

有没有一种方法可以禁用覆盖层透明背景的鼠标交互（就像 IE 似乎那样），同时保持覆盖层内按钮的鼠标交互？还是我需要更改代码的结构？

小提琴

Answer 1

我修改了 html 结构并使用 z-index 来控制 div 的位置。

HTML：

<div class="main">
    <div class="base"></div>
    <div class="overlay">
    </div>
    <div class="button left"></div>
    <div class="button right"></div>
</div>

CSS：</p>

.main {
    width: 350px;
    height: 150px;
    position: relative;
}
.base {
    background-color: #c0c0c0;
    width: 100%;
    height: 100%;
}
.overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.button {
    background-color: #707070;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 60px;

    z-index: 99;
}
.right {
    right: 0;
}​

Answer 2

这是一种方法。

带有覆盖元素：http: //jsfiddle.net/XC95u/11/

没有覆盖元素：http: //jsfiddle.net/XC95u/3/