CSS를 사용하여 호버에 있는 형제 요소의 색상을 변경하는 방법은 무엇입니까?

CSS Hover를 사용하여 형제 색상을 선택적으로 변경하는 방법

요소 위로 마우스를 가져갈 때 사용할 수 있는 특정 CSS 기술이 있습니다. 인접 요소의 모양을 변경합니다.

후속 요소 타겟팅 Siblings

CSS 선택기에서 " " 기호를 사용하면 마우스를 올려놓은 요소 바로 뒤에 있는 요소를 타겟팅할 수 있습니다. 예를 들어, 다음 코드는 이전 "h1" 요소를 마우스로 가리키면 "a" 요소의 색상을 변경합니다.

h1:hover + a { color: #4f4fd0; }

이전 형제 타겟팅

그러나 , CSS에는 이전 형제를 타겟팅하는 데 제한이 있습니다. 유사한 효과를 얻으려면 부모 컨테이너 내의 요소를 래핑하고 일반 형제 선택기 "~"를 사용하여 원하는 요소를 대상으로 지정해야 합니다. 그러나 이 방법으로 원하는 결과가 항상 나오지 않을 수도 있습니다.

#banner h1:hover ~ a { color: #4f4fd0; }

예시 시나리오

다음 HTML 마크업을 고려하세요.

<h1>

ID가 "title"인 "h1"을 가리킬 때 "a" 요소의 색상을 변경하려면 다음을 사용할 수 있습니다. 다음 CSS:

#title:hover + .button { color: #4f4fd0; }

위 내용은 CSS를 사용하여 호버에 있는 형제 요소의 색상을 변경하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!