javascript - 我怎样才能在前面画一个图层，但让它在后面可以选择？

Question

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

我的问题是：当我突出显示元素时（通过创建一个具有与原始元素相同尺寸并定位在与原始元素相同位置的半透明背景颜色的 div），必须将 div 绘制得高于该元素（为了可见。）但是，在某些情况下，应该可以突出显示子元素，“突出显示” div 位于顶部，从而阻止它们被选择。

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

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

这是一个小提琴来说明我的意思。

提前致谢！

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

或者，如果这与背景中断，您可以使用：

div.style.pointerEvents = 'none';

2 回答 2