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

これが1つのアプローチです。

オーバーレイ要素あり: http://jsfiddle.net/XC95u/11/

オーバーレイ要素なし: http://jsfiddle.net/XC95u/3/