我不确定这是否可行,但我正在尝试在对象上创建一个内嵌框阴影,同时仍保持子项可点击。
我从我发现的一些相关主题中制作了这个示例 http://jsfiddle.net/S8Sm7/14/
HTML
<div id="outer">
<div id="inner">
<a href="#">Click me if you can!</a>
</div>
</div>
CSS
#outer {
border: 1px solid black;
box-shadow: 0 0 20px 5px rgba(0, 0, 0, 1) inset;
height: 200px;
position: absolute;
width: 200px;
left: 100px;
top: 100px;
}
#inner {
background-color: #55A8FF;
bottom: 0;
height: 50px;
left: 0;
position: absolute;
width: 100%;
z-index: -10;
}
此示例要求您将内部 div 的 z-index 设置为负数,以使阴影正常显示。但是,一旦您这样做,您将无法再点击该链接。
我的最终目标是在侧边菜单的右边缘添加阴影。
最佳答案
只需将外部 div 指针事件设置为无,但这将使子指针事件也为无,因此自动将其打开
#outer {
border: 1px solid black;
box-shadow: 0 0 20px 5px rgba(0, 0, 0, 1) inset;
height: 200px;
position: absolute;
width: 200px;
left: 100px;
top: 100px;
pointer-events: none;
}
#inner {
background-color: #55A8FF;
bottom: 0;
height: 50px;
left: 0;
position: absolute;
width: 100%;
z-index: -10;
pointer-events: auto;
}
这是 fiddle :http://jsfiddle.net/S8Sm7/15/
注意:IE10 及以下版本不支持指针事件 - 您可以使用以下脚本为 IE 提供支持:https://github.com/kmewhort/pointer_events_polyfill
关于css - 用 box-shadow 覆盖 child ,但保持他们可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23147644/