如何在前面繪製圖層，但是如何在後面選擇圖層？

認爲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

回答