javascript - 孩子上方的css box-shadow，但保持交互

Question

我已经阅读了几个主题，例如

• 在文本上方显示框阴影
• 儿童顶部的CSS3盒子阴影

和许多其他人，但我找不到我搜索的答案。当一个元素被放置在其他元素之上时，与这些元素的交互被破坏（没有事件通过）。这意味着，无法选择基础文本或不会触发元素事件。这是关于jsFiddle的演示。

如您所见，有两个问题。

1. 如前所述，无法选择文本，也无法将悬停事件传播到div.hover元素。
2. 元素的大小div.shadow不是绝对正确的。这就是为什么div.hover元素的一部分在阴影框之外（在那里，悬停事件到达悬停元素）。

对于第一个问题，我很欣赏纯 CSS 的解决方案，但我也会对一些 JavaScript 感到满意。

谢谢，

---

附录：问题 2. 在 Mozilla Firefox 15.0.1 上

Answer 1

1. 您可以使用 CSSpointer-events属性。div.shadow根据这个jsFiddle设置它。
2. 我看不出问题出在哪里（使用 Chrome 23）。

更新

对于 #2 删除固定高度div.wrapper并添加overflow: auto（这将允许边距对div.hovered有一些影响div.wrapper）。看到这个jsFiddle。