Как я могу реализовать градиент непрозрачности для нескольких выбираемых изображений в сетке / карусели?

Question

долгое время слушатель, впервые звонящий.

У меня есть матрица значков, по которой можно перемещаться по горизонтали в карусели и по вертикали как категории (которые представляют собой ряды значков), которые отсоединяются / добавляются по мере того, как приложение циклически перемещается по категориям с помощью стрелок вверх / вниз.

Я хочу, чтобы самый нижний ряд значков исчезал в непрозрачности (у меня черный фон) из нативных цветов значков в черноту, когда вы идете сверху вниз, чтобы указать, что есть последующие строки ниже. Единственный способ определить, как это сделать, - это использовать background -webkit-градиент, как указано здесь:

CSS3 Прозрачность + Градиент

Я применяю это к DIV, который я накладываю выше моего нижнего ряда. К сожалению, я теряю кликабельность элементов за наложенным div. Однако я должен использовать оверлей, потому что это свойство является фоновым.

Есть ли еще какой-нибудь способ, которым я могу реализовать непрозрачность градиента в ряду кликабельных значков, которые становятся черными, не жертвуя кликабельностью? Я не хочу оверлея, который покрывает только нижние 25% / что угодно ... Мне нужно решение "все или ничего" для этого. Пока это выглядит так, будто «ничего» - мой единственный выбор.

Заранее большое спасибо.

Answer 1

Хммм ... на ум приходят два решения.

Во-первых, вы можете использовать наложение и отслеживать события мыши для этого элемента. Затем, с некоторой математикой, вы, вероятно, могли бы выяснить, что является базовым элементом, используя jQuery, чтобы вызвать щелчок по этому элементу (т.е. $("#icon14").click();).

Второй вариант - нарисовать прозрачный элемент div с каждым значком, который вы делаете в своей матрице. Поместите его точно в то же место, что и сам значок, но дайте ему css z-index, который поместит его над оверлеем. Этот прозрачный div теперь может обрабатывать все события мыши для вас, и все еще жить выше наложения.

Если вы пойдете по этому пути, я рассмотрю использование функции .data(), которая позволяет быстро привязать переменные к любому объекту jQuery. Вы можете установить этот сопутствующий div как свойство обычных значков в матрице, например, $("#icon14").data('clickDiv', $("#icon14_click")); (хотя вы, вероятно, захотите назначить их в цикле или что-то в этом роде =)

Удачи!