:hover가 외부 CSS 클래스를 수정할 수 있나요?

:hover가 외부 CSS 클래스를 수정할 수 있나요?

CSS에서는 :hover 선택기를 사용하여 마우스를 올리면 요소에 스타일 변경 사항을 적용할 수 있습니다. 하지만 다른 요소에 마우스를 올렸을 때 다른 클래스에 있는 요소의 CSS를 수정하려면 어떻게 해야 할까요?

CSS 선택기는 계층 구조나 DOM 내의 관계를 기반으로 요소만 대상으로 삼으므로 직접적으로는 불가능합니다. 현재 호버 요소 범위 외부에 있는 요소의 CSS를 수정합니다.

간접 수정 옵션

그러나 유사한 효과를 얻기 위한 간접적인 접근 방식이 있습니다.

• 상위-하위 관계: 수정하려는 요소(E)가 마우스로 가리킨 요소(F)의 하위 요소인 경우 F에서 :hover 선택기를 사용하여 E를 대상으로 지정할 수 있습니다. .

.item:hover .wrapper {
  /* Styles to be applied to '.wrapper' when '.item' is hovered */
}

• 형제 관계: E가 F의 형제(또는 F의 형제 중 하나의 후손)인 경우 ~ 형제 조합자를 사용할 수 있습니다.

.item:hover ~ .wrapper {
  /* Styles to be applied to '.wrapper' when '.item' or any of its siblings is hovered */
}

JavaScript 솔루션

CSS 솔루션이 가능하지 않은 경우 JavaScript를 사용하여 다음을 기반으로 E의 CSS 속성을 조작할 수 있습니다. F의 hover 상태.

<code class="javascript">document.querySelector('.item').addEventListener('mouseenter', () => {
  document.querySelector('.wrapper').style.backgroundColor = 'red';
});

document.querySelector('.item').addEventListener('mouseleave', () => {
  document.querySelector('.wrapper').style.backgroundColor = '';
});</code>

결론

CSS 선택자만으로는 외부 클래스를 직접 수정할 수 없지만 부모-자식 또는 형제 관계와 JavaScript는 다음에 대한 간접적인 솔루션을 제공합니다. 비슷한 효과를 얻습니다.

위 내용은 :hover가 외부 CSS 클래스를 수정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!