如何在网格/轮播中的多个可选图像上实现不透明度渐变？
长期倾听者，第一次来电者。
我有一个图标矩阵，可以在轮播中水平导航，也可以作为类别（图标行）垂直导航，当应用程序使用向上/向下箭头循环浏览类别时，可以分离/附加这些图标。
我想让最低行的图标在从上到下时以不透明度（我有黑色背景）从图标的本机颜色淡入黑色，以指示下面有后续行。我能够确定如何执行此操作的唯一方法是使用背景：-webkit-gradient，如下所示：
我将其应用到一个 DIV，并将其叠加在最低行上方。不幸的是，我失去了覆盖 div 后面项目的可点击性。但是，我必须使用覆盖层，因为该属性是背景属性。
有没有其他方法可以在一行可点击图标上实现渐变不透明度，并在不牺牲可点击性的情况下淡化为黑色？我不想要一个只覆盖较低 25%/无论什么的覆盖层...我需要一个全有或全无的解决方案。到目前为止，“什么都不做”似乎是我唯一的选择。
预先非常感谢您。
long time listener, first time caller.
I have a matrix of icons that can be navigated horizontally in a carousel, and vertically as categories (which are rows of icons) that are detached/appended as the app cycles through the categories with up/down arrows.
I want to make the lowest row of icons fade in opacity (I have a black background) from the native colors of the icons into blackness as you go from top to bottom, to indicate that there are subsequent rows beneath. The only way I have been able to determine how to do this is using background: -webkit-gradient, as indicated here:
I apply this to a DIV which I overlay above my lowest row. Unfortunately, I lose clickability of the items behind the overlaid div. I have to use the overlay, however, because the property is a background property.
Is there any other way I can implement a gradient opacity on a row of clickable icons that fades to black without sacrificing the clickability? I don't want an overlay that only covers the lower 25%/whatever either... I need an all-or-nothing solution to this. So far it's looking like "nothing" is my only option.
Thank you very much in advance.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
嗯...我想到了两种解决方案。
首先，您可以使用覆盖层并跟踪该元素上的鼠标事件。然后，通过一些数学，您可能可以找出底层元素是什么，使用 jQuery 触发该元素的点击（即
$("#icon14").click();）。第二个选项是用您在矩阵中制作的每个图标绘制一个配套的透明 div。将其放置在与图标本身完全相同的位置，但为其指定一个 css
z-index，使其位于覆盖层上方。这个透明的 div 现在可以为您处理所有鼠标事件，并且仍然位于覆盖层之上。如果您沿着这条路走下去，我会考虑使用
.data()函数，它可以让您快速将变量附加到任何 jQuery 对象。您可以将此伴随 div 设置为矩阵中普通图标的属性，例如$("#icon14").data('clickDiv', $("#icon14_click"));（尽管你可能想在循环或其他东西中分配这些=）祝你好运！
Hmmm... two solutions come to mind.
First, you could use the overlay, and track mouse events on that element. Then, with some math, you could probably figure out what the underlying element is use jQuery to trigger the click of that element (ie.
$("#icon14").click();).The second option would be to draw out a companion transparent div with each icon you make in your matrix. Place it in exactly the same spot as the icon itself, but give it a css
z-indexthat brings it above the overlay. This transparent div can now handle all the mouse events for you, and still live above the overlay.If you go down this road, I'd look into using the
.data()function that lets you quickly tack on variables to any jQuery object. You can set this companion div to be a property of the normal icons in the matrix, with something like$("#icon14").data('clickDiv', $("#icon14_click"));(though you'd probably want to assign these in a loop or something =)Good luck!