如何在前面绘制图层，但是如何在后面选择图层？

认为Google Chrome的“检查元素”。当用户将鼠标悬停在开发人员工具的一行上时，该元素将在屏幕上“突出显示”。我试图复制相同的功能，除了当用户将鼠标放在该元素上而不是从列表中时，可能会突出显示一个元素。如何在前面绘制图层，但是如何在后面选择图层？

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

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

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

这里是一个fiddle来展示我的意思。

在此先感谢！

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

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

2012-10-08 20:00:23 Shmiddty

是的，'pointer-events：none;'正是我期待的！感谢您的快速解决！ –

@MicahHenning指针事件不是跨浏览器，一定要在你的目标浏览器中测试 –

请注意，这样可以防止mouseout事件触发，所以代码不会执行任何操作。 – Shmiddty

您需要设置高亮元素的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';

2012-10-08 19:57:03 saml

Touche我打算发布完全相同的东西：D +1 –

某些元素将具有背景图像或颜色，防止突出显示出来。此外，标记可能包含任意数量的具有变量z-index值的元素。我会更新我的问题以反映这些限制。感谢您的回应！ –

如果任何元素具有背景，则会中断。 – Shmiddty

回答