관련 없는 요소에 마우스를 올려 CSS를 수정할 수 있나요?

Hover에서 다른 클래스의 CSS를 수정할 수 있습니까?

많은 개발자는 한 요소의 CSS를 다른 요소가 수정해야 하는 상황에 직면합니다. 관련 없는 요소 위에 마우스를 올려 놓았습니다. CSS만으로는 이를 달성하는 데 한계가 있는 경우가 많아 잠재적인 솔루션을 모색하게 됩니다.

CSS 솔루션

다행히 CSS는 이 작업에 대한 두 가지 효과적인 접근 방식을 제공합니다.

1. F를 E의 하위 요소로 사용: CSS를 수정하려는 요소(F)가 마우스를 가져간 요소(E)의 하위 요소인 경우 다음을 사용하세요.

   .item:hover .wrapper {
       /* CSS modifications for element F */
   }

   로그인 후 복사

2. E의 형제인 F: F가 E의 자식이 아니라 DOM에서 이후의 형제 또는 그 후손인 경우(에서 E 다음에 나타남) 마크업), 사용:

   .item:hover ~ .wrapper {
       /* CSS modifications for element F */
   }

   로그인 후 복사

JavaScript Alternative

JavaScript는 일반적으로 이러한 간단한 작업에는 권장되지 않지만 다음을 제공합니다. 대체 접근 방식:

document.getElementsByClassName('item')[0].onmouseover = () => {
    document.getElementsByClassName('wrapper')[0].style.backgroundColor = "url('some url')";
};

위 내용은 관련 없는 요소에 마우스를 올려 CSS를 수정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!