순수한 CSS 갤러리 초점 효과 : NOT

이전에는 컨테이너 내의 모든 요소를 ​​스타일링하여 호버링 된 하나를 제외하고는 종종 JavaScript와 관련이 있습니다. 이는 일반적으로

및 이벤트에 클래스를 추가하거나 제거하는 것을 의미합니다. 기능적이지만 순수한 CSS 솔루션이 종종 바람직합니다. 이 기사는 Netflix 홈페이지와 같은 애니메이션을 재현하는 데 사용되는 기술에서 처음에 영감을 얻은 CSS 전용 접근 방식을 자세히 설명합니다. 그러나이 방법을 사용한 이전의 시도는 요소 간의 간격으로 인해 그리드 기반 레이아웃에서 실패했습니다. 이 기사는 이러한 차이를 우아하게 처리하는 솔루션을 제시합니다.

마크 업 및 기본 CSS 기초 HTML은 그리드 기반 목록을 사용합니다 mouseenter : 컨테이너 그리드. mouseleave : 개별 그리드 항목.

마크 업은 다음과 같습니다

초기 CSS 스타일은 그리드와 그 어린이를 스타일링합니다

이것은 항목 사이의 간격이있는 3 열 그리드 (화면 크기에 따라 동적으로 조정)를 만듭니다. CSS 선택기 활용 핵심 상호 작용에는 두 단계가 포함됩니다 컨테이너 호버링은 모든 어린이에게 영향을 미칩니다 호버링 된 아이 자체는 제외됩니다

먼저, 컨테이너가 호버링되면 모든 어린이를 대상으로합니다.
• 다음으로, 우리는 불투명도를 줄이기 위해 .grid를 사용하여 현재 호버링 된 아동을 제외합니다.
이것은 요소 사이의 간격없이 완벽하게 작동합니다. 그러나 차이로 인해 커서가 갭 자체를 넘어 서면 효과가 트리거됩니다. 주소 지정 간격 솔루션은 포인터 이벤트를 제어하는 ​​데 있습니다.
• 컨테이너에서 를 설정하고 어린이의 .grid__child를 설정함으로써, 우리는 호버 효과가 자식 요소를 바로 위에 바로 위에 닿을 때만 트리거링하여 간격을 효과적으로 무시합니다.
.

더 부드러운 불투명도 변화에 대한 전환을 추가하면 효과가 완료됩니다. 이 솔루션을 통합 한 최종 CSS는 다음과 같습니다

잠재적 한계

효과적이지만이 접근법은 스크롤 가능한 컨테이너 (예 : 수평 슬라이더)를 조정해야 할 수 있습니다. 그러한 경우, 다른 컨테이너에

를 감싸는 경우 해결 방법이 될 수 있습니다.

결론 이것은 일반적인 상호 작용 도전을위한 강력한 순수한 CSS 솔루션을 보여줍니다. 고급 CSS 선택기 및 포인터 이벤트 컨트롤을 활용하여 JavaScript에 의지하지 않고 정교한 효과를 얻어 청정하고 유지 관리 가능한 코드로 이어집니다. 이는 CSS의 기능이 증가하는 기능을 강조하고 JavaScript 복잡성을 추가하기 전에 기본 솔루션 탐색을 장려합니다.

위 내용은 순수한 CSS 갤러리 초점 효과 : NOT의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!