Question

我不确定这是否可行，但我正在尝试在对象上创建一个插入框阴影，同时仍然让孩子可以点击。

的一些相关主题中做了这个例子

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

这是小提琴：http://jsfiddle.net/S8Sm7/15/

注意：IE10＆amp;以下不支持指针事件 - 您可以使用以下脚本为IE提供支持：https://github.com/kmewhort/pointer_events_polyfill

Answer 2

＆＃34;指针事件＆＃34;以前不支持IE10。

另一种方法是简单地为未分配z-index的文本使用另一个层：

<div id="outer">
    <div id="inner"></div>
    <div id="text">
        <a href="#">Click me if you can!</a>
    </div>
</div>

在这里小提琴：http://jsfiddle.net/S8Sm7/16/

给孩子们盖上盒子阴影，但要让他们保持可点击状态

2 个答案: