CSS를 사용하여 마우스 오버 시 형제 요소의 색상을 어떻게 변경할 수 있습니까?

CSS를 사용하여 마우스 오버 시 형제 요소의 색상 조작

HTML 요소의 모양을 수정하는 한 가지 방법은 CSS를 사용하는 것입니다. 이 기사에서는 형제 요소 위로 마우스를 가져갈 때 색상을 변경하는 특정 요청을 살펴보겠습니다.

원래 문제 설명

다음 HTML 코드가 제공됩니다.

<h1>Heading</h1>
<a class="button" href="#">-</a>

우리의 목표는

CSS만 사용하는 요소.

형제 요소 상호 작용

안타깝게도 CSS 형제 선택자는 앞에 있는 요소에 영향을 미칠 수 없습니다. 위의 예에서

요소는 (바로 다음 형제) 선택기를 사용하여 요소의 색상을 직접 변경할 수 없습니다.

컨테이너 기반 솔루션

한 가지 해결 방법은 상위 컨테이너 div를 도입하는 것입니다. ID 사용:

<div>

그러나 이는 다음과 같은 직접적인 연결을 제공하지 않습니다. 요소와

element.

대체 접근 방식

이 제한을 극복하려면 CSS를 사용하여 "다음 형제"(지정된 요소 뒤에 오는 요소)를 타겟팅하는 것을 고려해 보세요. 아래 예는 이를 달성하는 방법을 보여줍니다.

h1 {
  color: #4fa04f;
}

h1 + a {
  color: #a04f4f;
}

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

이렇게 하면 기본 상태에서는 요소가 #a04f4f로 변경되고

요소.

위 내용은 CSS를 사용하여 마우스 오버 시 형제 요소의 색상을 어떻게 변경할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!