如何在柵格/旋轉木馬中的多個可選圖像上實現不透明度梯度？

Question

長時間收聽，第一次來電。

我有一個可以在旋轉木馬中水平導航的圖標矩陣，以及在應用程序通過向上/向下箭頭在類別中循環時分離/附加的類別（它們是圖標行）的垂直矩陣。

我想從圖標的本機顏色中將最下面一排圖標淡入不透明（我有一個黑色背景），當您從上到下走向黑色時，表明下面有後續行。 -webkit-梯度，如下所示：我已經能夠確定如何使用背景做的唯一途徑

CSS3 Transparency + Gradient

我申請這個，而我上面覆蓋我的最低行覈實。不幸的是，我失去了疊加div後面項目的可點擊性。但是，我必須使用疊加層，因爲該屬性是背景屬性。

是否有任何其他方式可以對一排可點擊圖標實現漸變不透明度：在不犧牲可點擊性的情況下淡出爲黑色？我不想要覆蓋率只有25％/無論哪一個......我需要一個全有或全無的解決方案。到目前爲止，它看起來像「無」是我唯一的選擇。

非常感謝您提前。

Answer 1

嗯...兩個解決方案浮現在腦海。

首先，您可以使用疊加層，並在該元素上追蹤鼠標事件。然後，通過一些數學計算，您可能會弄清楚使用jQuery觸發單元的點擊（即$("#icon14").click();）的基本元素。

第二個選項是用矩陣中的每個圖標繪製伴隨透明div。將它放置在與圖標本身完全相同的位置，但給它一個css z-index，使其位於覆蓋層之上。這個透明的div現在可以爲你處理所有的鼠標事件，並且仍然活在覆蓋層之上。

如果你走下這條路，我會考慮使用.data()函數，它可以讓你快速處理任何jQuery對象的變量。您可以將此伴隨div設置爲矩陣中正常圖標的屬性，類似$("#icon14").data('clickDiv', $("#icon14_click"));（儘管您可能希望將它們分配在循環中或某物=）

祝您好運！