我有一个基本的html元素,我有一个包含一些按钮的覆盖元素。
我希望鼠标能够与基本元素以及叠加层中的按钮进行交互。
问题是覆盖层捕获基元素的鼠标事件。
有没有办法可以禁用覆盖层透明背景的鼠标交互(就像 IE 似乎所做的那样),同时保留覆盖层内按钮的鼠标交互?还是我需要更改代码的结构?
小提琴
这里有一种方法。
使用叠加元素:http://jsfiddle.net/XC95u/11/
没有叠加元素:http://jsfiddle.net/XC95u/3/
我修改了 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;
}