그리드/회전식 메뉴에서 여러 개의 선택 가능한 이미지 전체에 불투명도 그라디언트를 구현하려면 어떻게해야합니까?

Question

오랫동안 청취자, 처음으로 발신자.

나는 회전 목마에서 가로로 탐색 할 수있는 아이콘 행렬을 가지고 있으며, 앱이 위/아래 화살표가있는 카테고리를 순환하면서 분리/추가되는 카테고리 (아이콘 행)로 세로로 표시됩니다.

아래에서 연속 된 행이 있음을 나타 내기 위해 아이콘의 기본 색상을 흑색으로 불투명하게 페이드 (검정색 배경)하고 싶습니다. 여기에 표시된 바와 같이, -webkit-그라데이션을 : :이 배경을 사용하는 방법을 결정할 수 있었던 유일한 방법

CSS3 Transparency + Gradient

나는 내 가장 낮은 행 위에 합성하려면 DIV이 적용됩니다. 불행히도 오버레이 된 div 뒤에있는 항목의 클릭 가능성을 잃어 버립니다. 그러나 속성이 배경 속성이기 때문에 오버레이를 사용해야합니다.

클릭 가능성을 희생하지 않으면 서 검은 색으로 희미 해지는 클릭 가능한 아이콘 행에 그래디언트 불투명도를 구현할 수있는 다른 방법이 있습니까? 나는 아래층 25 % 만 커버하는 오버레이를 원하지 않는다. 나는 이것에 모든 것이 든 또는 전혀없는 해결책이 필요하다. 지금까지는 "아무것도"볼 수없는 유일한 방법입니다.

대단히 감사합니다.

Answer 1

음 ... 두 가지 해결책이 떠오릅니다.

먼저, 오버레이를 사용하고 해당 요소에서 마우스 이벤트를 추적 할 수 있습니다. 그런 다음 일부 수학을 사용하면 기본 요소가 해당 요소의 클릭을 트리거하는 데 사용되는 jQuery (예 : $("#icon14").click();)를 파악할 수 있습니다.

두 번째 옵션은 매트릭스에있는 각 아이콘과 함께 투명 div를 그릴 것입니다. 아이콘 자체와 정확히 같은 위치에 놓으십시오. 그러나 오버레이 위에 가져 오는 CSS z-index을 지정하십시오. 이 투명한 div는 이제 모든 마우스 이벤트를 처리 할 수 ​​있으며 여전히 오버레이 위에 있습니다.

이 길을가는 경우 변수를 모든 jQuery 객체에 빠르게 집어 넣을 수있는 .data() 함수를 사용합니다. 이 컴패니언 div를 행렬에있는 일반 아이콘의 속성으로 설정할 수 있습니다 (예 : $("#icon14").data('clickDiv', $("#icon14_click")); 등).

행운을 빈다.