點擊帶alpha通道的div

我正試圖複製Twitter的「淡出」圖層，位於供稿窗口小部件的底部（在twitter.com的主頁上）。點擊帶alpha通道的div

我唯一可以想出的方法是不使用html5的地方是在feed div上方放置一個絕對定位的div，併爲它提供一個alpha通道png，其上面有一個白色到透明的漸變。這很容易實現。

現在唯一的問題是，出現在透明圖層下面的div不可點擊。關於如何使div可點擊的任何想法？也許你有另一種方法來完全複製這種效果？

謝謝！

來源

2010-09-25 Shmulik

你有你的意思，也許代碼片段的例子嗎？ – JamesStuddart 2010-09-25 09:22:39

本文將介紹一種捕獲onclick事件的方法，並通過暫時隱藏疊加層來處理它，反覆點擊，然後再次取消隱藏。最終用戶不應該看到隱藏。

Forwarding Mouse Events Through Layers：

textarea的（我的掩模元件）在網格上接收鼠標懸停，鼠標移動，鼠標按下， mouseup和其他事件被定位。

頂部掩蔽層被隱藏片刻，所以我們可以找出在事件位置的掩碼下面有哪些元素是。

事件被重新啓動 - 這是W3 DOM事件模型的和Microsoft等效的更簡單的。

再次啓動該過程 - 準備好下一個事件。

編輯：我覺得微博其實做簡單得多。從一系列瀏覽器已經實現了從SVG借用的CSS屬性。

.overlay { pointer-events: none; }

這是目前支持在Firefox 3.6及更高版本，Safari 4的和谷歌Chrome - 所以，如果你很高興爲它只能工作在這些瀏覽器，那麼這是一個更簡單的選項，與添加的優點在於它也可用於懸停事件，而不僅僅是點擊事件。

來源

2010-09-25 09:37:56 Nick

謝謝！ Twitter的版本也適用於IE，所以他們可能正在做你第一次提出的建議。我會試一試。 – Shmulik 2010-09-25 23:14:02

我剛剛嘗試過IE8，我無法點擊其中一個藍色漸變下的任何東西。你使用的是什麼版本？ – Nick 2010-09-26 16:37:33

不，你說得對。它在IE中不起作用。不知道爲什麼我認爲它確實如此（我可能點擊了漸變區域之外）。所以這解決了它 - 他們使用指針事件屬性。再次感謝:) – Shmulik 2010-09-26 20:35:52

-1

對於IE瀏覽器，只需將底部div或layer使用負指數，就像這樣：

{pointer-events: none; z-index: -100}

來源

2010-12-09 21:54:34 tk416

設置z-index將元素放在後面。打敗重疊的目的。 – 2011-08-10 14:43:29

點擊帶alpha通道的div

回答

相關問題