與透明元件背景

Question

防止鼠標交互我有一個基地html元素和我有一個包含一些按鈕的覆蓋元件。

我想鼠標能夠與基本元素以及與覆蓋中的按鈕交互兩者。

的問題是，所述覆蓋捕獲基本元件的鼠標事件。

有沒有辦法，我可以禁用覆蓋的透明背景的鼠標交互的方式（如IE似乎做），同時保持鼠標交互的覆蓋內的按鈕？或者我需要更改我的代碼的結構？

Fiddle

Answer 1

這裏有一個方法。

與覆蓋元件： http://jsfiddle.net/XC95u/11/

沒有覆蓋元件： http://jsfiddle.net/XC95u/3/

Answer 2

我修改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：

.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; 
}​