css box-shadow高于孩子，但保持互动

Question

我读过几个主题，比如

• display box shadow above the text
• CSS3 box shadow on top of children

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

如您所见，有两个问题。

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

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

谢谢，

---

附录：问题2.关于Mozilla Firefox 15.0.1

Answer 1

1. 您可以使用CSS pointer-events属性。按照jsFiddle
在div.shadow上设置。{/ 1}
2. 我看不出是什么问题（使用Chrome 23）。

<强>更新

对于＃2，移除div.wrapper上的固定高度并添加overflow: auto（这将允许div.hovered上的边距对div.wrapper产生一些影响。请参阅此jsFiddle。