如何将图层绘制在最上方，同时使其在后面可被选择？

Question

当用户在开发者工具中悬停在某一行时，类似于谷歌Chrome的“检查元素”，该元素会在屏幕上被“突出显示”。我试图复制相同的功能，但是当用户从元素上悬停时，该元素可能会被突出显示，而不是从列表中选取。我的问题是：当我突出显示元素（通过创建一个具有半透明背景颜色且尺寸与原始元素相同并位于原始元素相同位置的div）时，该div必须比该元素更高（以便可见）。然而，在某些情况下，存在应该可以突出显示的子元素，但“突出显示”div位于其上方，从而防止它们可以被选择。某些元素将具有背景图像或颜色，从而防止突出显示的显示。此外，标记可能包含任意数量的具有变化z-index值的元素。如果不可能，我正在寻找任何解决方法或替代方法。这里是一个演示所指的fiddle。提前感谢！

- Micah Henning

Answer 1

您可以使用CSS3的pointer-events:none;：http://jsfiddle.net/Shmiddty/BU27J/9/ 或者，您可以使用z-index:-1;，但是如果您的“高亮”元素有自己的背景，则看不到突出显示的div。

- Shmiddty

---

是的，pointer-events:none; 恰好是我正在寻找的！感谢您的快速修复！ - Micah Henning

@MicahHenning pointer-events 不是跨浏览器的，一定要在目标浏览器中进行测试。 - Ruan Mendes

请注意，这会防止mouseout事件触发，因此对于该事件的代码将不起作用。 - Shmiddty

@Shmiddty 很棒的发现。我认为因为我重用了“highlight” div，所以即使mouseout事件没有触发，我们也没问题。 - Micah Henning

@JuanMendes 幸运的是，Chrome 是我在这个项目中需要支持的唯一平台。感谢您提醒！ - Micah Henning

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';

- saml

---

我也是要发同样的内容呢 :D +1 - Cristiano Fontes

一些元素可能会有背景图片或颜色，这样就无法显示高亮效果。另外，标记语言中可能包含任意数量的具有不同 z-index 值的元素。我会更新我的问题来反映这些限制。谢谢您的回复！ - Micah Henning

如果任何元素具有背景，这将导致破裂。 - Shmiddty