CSS가 다른 요소의 호버 상태에 따라 형제 요소의 스타일에 영향을 미칠 수 있습니까?

CSS Hover를 사용한 형제 상호 작용

웹 디자인에서는 다음을 기반으로 요소의 형제의 모양을 수정하려는 시나리오에 직면할 수 있습니다. 호버 상태. 그러나 CSS에서는 이 기능에 제한이 있습니다.

호버링 시 형제 색상 변경

인접한 요소가 있고 다음 형제의 색상을 변경하려는 경우 첫 번째 요소(보통 형제 요소 앞에 위치)에 마우스를 올리면 CSS를 사용할 수 있습니다. 예를 들어, "h1" 제목 위에 마우스를 올리면 "a" 링크의 색상을 변경할 수 있습니다.

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

제한 사항

그러나 동일한 방식으로 이전 형제의 색상에 영향을 미칠 수 없습니다. "h1" 제목 뒤에 "a" 링크가 있고 링크 위로 마우스를 가져갈 때 제목 색상을 변경하려는 경우 CSS로는 불가능합니다.

a:hover + h1 {
  background-color: #444;  // This won't work
}

CSS 형제 상호 작용 예

다음은 가능한 CSS 상호작용과 불가능한 CSS 상호작용을 보여주는 예입니다. 상황:

<h1>Heading</h1>
<a class="button" href="#">The "Button"</a>
<h1>Another Heading</h1>

h1 {
  color: #4fa04f;
}
h1:hover + a {
  color: #4f4fd0;
}
a:hover + h1 {
  background-color: #444;  // This won't work
}

위 내용은 CSS가 다른 요소의 호버 상태에 따라 형제 요소의 스타일에 영향을 미칠 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!