html - 透明 div 下方的可点击 div

标签 html css transparency z-index css-position

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

<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>

最佳答案

Pointer-events可以解决你的问题。到目前为止,Firefox 3.6+、Safari 4 和 Google Chrome 都支持指针事件(请参阅 compatibility table)。

关于html - 透明 div 下方的可点击 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10663286/

相关文章:

javascript - 如果没有提交按钮,如何检查单选按钮是否已选中?

javascript - 如何在小屏幕上折叠侧边栏?

ios - UINavigationBar 应该是不透明的,但透明的 PNG 图像应该允许背景可见

ios - 仅在 iOS 上存在 GLSL 透明度问题

c# - OpenTK绘制透明圆

html - 输入和按钮彼此相邻时的额外空间

javascript - 基于背景颜色的倒置 Logo

html - 在 Bootstrap 中设置两个水平 div,在移动模式下只有 1 个全宽

jquery - 如何绝对定位,静态定位元素在它们所在的相同位置?

javascript - Div 出现在 > 900px 滚动并停在页脚 div