如何使插入框阴影显示在子链接上，但仍然可以点击它们

Question

我有一个带有插入框阴影的div，我想在这个div中有一些链接，我想让阴影显示在这些链接上，但这些链接仍然是可点击的

下面是一个例子:https://jsfiddle.net/5rsbn927/

<div id="navigation" role="navigation">
<div id="navbar" role="navigation"> <!-- this div has shadow -->
    <a href="#" id="link1">Link</a><a href="#" id="link2">Link</a><a href="#" id="link3">Link</a><a href="#" id="link4">Link</a><a href="#" id="link5">Link</a><a href="#" id="link6">Link</a>
</div>
</div>

#navbardiv有阴影，链接都是inline-block。

我好像什么都动不起来。Z-index(带定位)，pointer-events，:之前，到目前为止都没有工作过。我唯一一次成功地让阴影显示在链接上方，它们是不可点击的。

为了记录，这是它应该看起来的样子;我只是想改变背景，但保持相同的阴影时，链接悬停:https://i.stack.imgur.com/VUA18.png(我也改变了颜色在jsfiddle只是为了更容易看到)。

在这一点上，我真的不关心它是否需要jQuery或其他东西，而不是box-shadow;

Answer 1

您提到的图像没有插入阴影，但它在背景上只有从白色到灰色的渐变。所以你可以参考这里。