CSS가 다른 클래스 위로 마우스를 가져가면 한 클래스의 스타일을 수정할 수 있습니까?

CSS를 사용하여 마우스 오버 시 클래스 스타일 수정

클래스 위로 마우스를 가져갈 때 단일 CSS 규칙을 사용하여 한 클래스의 CSS 속성을 변경할 수 있나요? 별도의 클래스에 있는 요소인가요? 다음과 같은 규칙을 생성할 수 있습니까?

.item:hover .wrapper { /*some css*/ }

.wrapper가 .item 내에 직접 포함되지 않고 문서의 다른 곳에 위치합니까?

CSS 솔루션

예, CSS 선택기를 사용하면 가능합니다. :hover를 사용하여 다른 요소의 스타일을 수정할 때 취할 수 있는 접근 방식에는 두 가지가 있습니다.

1. 하위 요소 또는 하위 요소

.wrapper가 .item의 하위 요소인 경우 다음 선택기를 사용할 수 있습니다.

.item:hover .wrapper {
    /* CSS properties to change */
}

2. 형제 요소

.wrapper가 DOM에서 .item 뒤에 나타나는 .item의 형제 요소인 경우 다음 선택기를 사용할 수 있습니다.

.item:hover ~ .wrapper {
    /* CSS properties to change */
}

JavaScript 솔루션

이 간단한 작업에는 JavaScript가 필요하지 않지만 이를 사용하면 원하는 효과를 얻을 수 있습니다. 예는 다음과 같습니다.

document.getElementsByClassName('item')[0].addEventListener('mouseover', function() {
  document.getElementsByClassName('wrapper')[0].style.background = "url('some url')";
});

추가 정보

예제 메뉴 요소가 별도의 클래스를 사용하는 것으로 보인다는 점에 유의하는 것이 중요합니다. 요소 위로 마우스를 가져가면 해당 하위 메뉴가 오른쪽에 오버레이로 나타납니다. 하위 메뉴의 배경을 제어하는 ​​클래스 이름은 "래퍼"입니다. 원하는 효과를 얻으려면 위에서 설명한 형제 선택기 접근 방식을 사용하세요.

참조

• [CSS 2.1 선택기](https://www.w3.org /TR/CSS21/selectors.html)

위 내용은 CSS가 다른 클래스 위로 마우스를 가져가면 한 클래스의 스타일을 수정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!