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

CSS에서 마우스 오버 시 형제 요소의 색상을 변경하는 방법

HTML에서 형제는 동일한 상위 요소를 공유하는 요소입니다. 특정 요소 위로 마우스를 가져갈 때 동위 요소의 모양을 변경하는 것이 바람직한 경우가 많습니다.

다음 동위 요소의 색상 변경

동위 요소의 색상을 변경하려면 호버링된 요소 뒤에 오는 형제 요소는 CSS에서 인접한 형제 선택기( )를 사용합니다. 예를 들어, 다음 앞의

요소를 가리키면:

h1 {
  color: #4fa04f;
}

h1 + a {
  color: #a04f4f;
}

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

제한 사항: 선행 형제 요소의 색상 변경

CSS는 선행 형제 요소의 스타일을 변경하는 직접적인 방법을 제공하지 않습니다. 형제 요소의 hover 상태를 기반으로 하는 요소입니다.

래퍼 사용 Div

div의 요소를 ID로 래핑하면 더 복잡한 CSS 선택기를 사용하여 이전 형제의 색상을 변경할 수 있습니다.

<div>

#banner h1 {
  color: #4fa04f;
}

#banner a {
  color: #a04f4f;
}

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

#banner:hover a {
  color: #a04f4f;
}

이 접근 방식을 사용하면 형제 요소의 스타일을 더 효과적으로 제어할 수 있지만 추가 마크업이 필요하고 효율성이 떨어질 수 있습니다.

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