css - 用 box-shadow 覆盖 child ，但保持他们可点击

Question

我不确定这是否可行，但我正在尝试在对象上创建一个内嵌框阴影，同时仍保持子项可点击。

我从我发现的一些相关主题中制作了这个示例 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 设置为负数，以使阴影正常显示。但是，一旦您这样做，您将无法再点击该链接。

我的最终目标是在侧边菜单的右边缘添加阴影。

Answer 1

只需将外部 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