如何在前面绘制一层，但在后面使其可选择

Question

想想谷歌Chrome的"检查元素"。当用户将鼠标悬停在开发工具中的一行上时，该元素会在屏幕上"突出显示"。我正在尝试复制相同的功能，只是当用户将鼠标悬停在某个元素上而不是从列表中时，该元素可能会高亮显示。

我的问题是：当我高亮显示元素时(通过创建一个半透明背景色的div，其尺寸与原始元素相同，位置与原始元素一致)，div必须绘制得比该元素高(以便可见)。然而，在某些情况下，如果有子元素应该可以高亮显示，"highlight"div位于顶部，使它们无法进行选择。

某些元素将具有背景图像或颜色，从而阻止高亮显示。此外，标记可以包含任意数量的具有可变z索引值的元素。我将更新我的问题以反映这些限制。

如果这不可能的话，我正在寻找任何解决方案或替代方案的建议。

这是一把小提琴来表明我的意思。

提前感谢！

Answer 1

您可以使用CSS3pointer-events:none;：http://jsfiddle.net/Shmiddty/BU27J/9/

或者，您可以使用z-index:-1;，但如果您的"高亮显示"元素有自己的背景，您将看不到高亮显示div。

Answer 2

您需要设置高亮元素的zIndex：

div.style.width = this.offsetWidth + 'px';
div.style.height = this.offsetHeight + 'px';
div.style.zIndex = -1; // this puts it behind everything

这是您更新的jsFiddle

或者，如果这与背景不符，你可以使用：

div.style.pointerEvents = 'none';