순수 CSS로 하위 요소 위로 마우스를 가져갈 때 상위 요소의 호버 효과를 끄는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

순수 CSS로 하위 요소 위로 마우스를 가져갈 때 상위 요소의 호버 효과를 끄는 방법은 무엇입니까?

DDD

풀어 주다： 2024-11-03 13:46:31

원래의

552명이 탐색했습니다.

How to Turn Off a Parent Element's Hover Effect When Hovering Over Its Child with Pure CSS?

자식이 마우스를 올리면 부모 마우스 오버: 순수한 CSS 접근 방식

HTML 구조에는 두 개의 중첩된

요소: .parent는 외부 컨테이너이고 .child는 내부 요소입니다. 기본적으로 마우스 커서를 .parent 위로 가져가면 배경색이 연한 파란색으로 변경됩니다. 그러나 우리의 목표는 커서가 .child 위에 있을 때 .parent의 배경을 원래 회색 색상으로 되돌리는 것입니다.

안타깝게도 현재 CSS 선택기에는 하위 요소의 상태에 따라 상위 요소의 스타일을 지정하는 기능이 부족합니다. 이러한 제한을 피하기 위해 우리는 추가 형제 요소를 사용하는 기발한 기술을 사용할 것입니다.

CSS에서는 크기와 패딩, 회색 배경을 사용하여 .parent 요소를 정의합니다. 마우스를 .parent 위로 가져가면 배경이 연한 파란색으로 변합니다.

중요한 부분은 .child 요소입니다. 음수 여백(상단: -200px;)을 사용하여 부모보다 높은 거리에 위치를 지정하고 마우스를 올리면 검은색으로 전환되는 어두운 회색 배경을 제공합니다.

마지막으로 .sibling 요소를 소개합니다. 이는 .child와 일치하도록 위치와 크기가 지정되지만 왼쪽과 위쪽에 약간 위치한 자리 표시자 요소입니다. 또한 마우스를 올리면 흰색으로 전환되는 색상 배경도 있습니다.

마우스 커서를 .child 위로 가져가면 .child 요소의 배경 색상이 검정색으로 전환됩니다. 동시에 이로 인해 .sibling 요소가 이전에 마우스로 가리키고 있던 .parent 부분을 덮어 덮게 됩니다. .sibling이 투명하기 때문에 .parent의 원래 회색 배경이 다시 표시됩니다.

결과적으로 .child 위로 마우스를 가져가면 배경이 검은색으로 바뀌고 이전에 강조 표시되었던 .parent 부분이 숨겨집니다. 이는 .parent의 배경이 실제로는 .sibling 뒤에 여전히 회색임에도 불구하고 원래 색상으로 되돌아간 듯한 착각을 불러일으킵니다.

이 상황에서 순수 CSS의 한계에도 불구하고 이 기술은 우아하고 하위 요소 위로 마우스를 가져갈 때 상위 요소에 대한 호버 효과를 끄는 효과적인 솔루션입니다.

위 내용은 순수 CSS로 하위 요소 위로 마우스를 가져갈 때 상위 요소의 호버 효과를 끄는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!