Javascript 如何在网格/旋转木马中跨多个可选图像实现不透明度渐变？

长时间侦听器，第一次调用

我有一个图标矩阵，可以在旋转木马中水平导航，也可以垂直导航为类别（即图标行），当应用程序使用向上/向下箭头在类别中循环时分离/附加这些类别

我想让最低一行图标在不透明度（我有一个黑色背景）中从图标的本色变为黑色，从上到下，以指示下面有后续行。我能够确定如何执行此操作的唯一方法是使用background:-webkit gradient，如下所示：

我将其应用于覆盖在最低行上方的DIV。不幸的是，我失去了覆盖div后面的项目的可点击性。但是，我必须使用覆盖，因为该属性是背景属性

有没有其他方法可以在不牺牲可点击性的情况下，在一行可点击图标上实现渐变不透明度，使其变为黑色？我不想要只覆盖较低25%的覆盖层/无论什么。。。我需要一个全有或全无的解决方案。到目前为止，“什么都没有”似乎是我唯一的选择

---

事先非常感谢。

嗯。。。我想到了两个解决办法

首先，可以使用覆盖，并跟踪该元素上的鼠标事件。然后，通过一些数学运算，您可能会知道底层元素是什么，使用jQuery触发该元素的单击（即，

$（“#icon14”）。单击（）；

）

第二个选项是绘制一个附带的透明div，其中包含矩阵中的每个图标。将其放置在与图标本身完全相同的位置，但给它一个css

z-index

，使其位于覆盖层之上。这个透明的div现在可以为您处理所有鼠标事件，并且仍然位于覆盖层之上

如果您沿着这条路走下去，我会考虑使用

.data（）

函数，该函数允许您快速将变量附加到任何jQuery对象。您可以使用类似于

$（“#icon14”）.data（'clickDiv'，$（“#icon14#click”）的内容将此伴生div设置为矩阵中普通图标的属性（尽管您可能希望在循环或其他方式中分配这些值=）

祝你好运
 Hmmm。。。我想到了两个解决办法

首先，可以使用覆盖，并跟踪该元素上的鼠标事件。然后，通过一些数学运算，您可能会知道底层元素是什么，使用jQuery触发该元素的单击（即，
$（“#icon14”）。单击（）；
）

第二个选项是绘制一个附带的透明div，其中包含矩阵中的每个图标。将其放置在与图标本身完全相同的位置，但给它一个css
z-index
，使其位于覆盖层之上。这个透明的div现在可以为您处理所有鼠标事件，并且仍然位于覆盖层之上

如果您沿着这条路走下去，我会考虑使用
.data（）
函数，该函数允许您快速将变量附加到任何jQuery对象。您可以使用类似于
$（“#icon14”）.data（'clickDiv'，$（“#icon14#click”）的内容将此伴生div设置为矩阵中普通图标的属性（尽管您可能希望在循环或其他方式中分配这些值=）

祝你好运
 非常感谢。我将尝试第二种选择，因为我认为它非常适合我所拥有的。非常感谢！没问题。仔细考虑一下，您可能希望以不同的方式使用data（）；在clickDiv上创建myIcon属性，而不是在图标上创建clickDiv属性。这样，当它被点击时，你可以说$（This）.data（'myIcon'）。非常感谢你的点击。我将尝试第二种选择，因为我认为它非常适合我所拥有的。非常感谢！没问题。仔细考虑一下，您可能希望以不同的方式使用data（）；在clickDiv上创建myIcon属性，而不是在图标上创建clickDiv属性。这样，当它被单击时，您可以只说$（This）.data（'myIcon'）。click（）