透明div下的可点击div [英] Clickable divs beneath transparent div

问题描述

是否有一个绝对定位的透明div可以覆盖一系列可点击的div？我希望能够将鼠标悬停在下面的红色div上以获得响应。

Is it possible to have a absolute-positioned, transparent div overlaying a series of divs that are clickable? I want to be able to hover over the red divs underneath in order to get a response.

<style type="text/css">

#holder{
    width:200px;
    height:200px;
}
.clickMe {
    width:100px;
    height:100px;
    cursor:pointer;
    background-color:red;
    border:1px solid black;
    float:left;
    margin:-1px;
    padding:0;
}
.hidey {
    position:absolute;
    top:0;
    left:0;
    z-index:50;
    height:50%;
    width:50%;
    opacity:.25;
    background-color:black;
}
</style>
<div class="hidey"></div>
<div id="holder">
    <div class="clickMe"></div>
    <div class="clickMe"></div>
    <div class="clickMe"></div>
    <div class="clickMe"></div>
</div>

推荐答案

指针事件可以解决您的问题。到目前为止，Firefox 3.6 +，Safari 4和Google Chrome支持指针事件（请参见兼容性表）。

Pointer-events can solve your problem. Pointer-events are supported in Firefox 3.6+, Safari 4 and Google Chrome so far (see compatibility table).

这篇关于透明div下的可点击div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！