:hover를 사용하여 다른 클래스의 CSS를 수정하는 방법은 무엇입니까?

다른 클래스의 CSS를 수정하기 위해 :hover 사용 방법

한 클래스의 CSS를 수정하고 싶은 경우가 있습니다 CSS만을 사용하여 다른 클래스의 요소 위로 마우스를 가져갈 때. 이 기술은 JavaScript에 의존하지 않고 시각적으로 매력적인 효과를 만들려는 경우 특히 유용합니다.

CSS 전용 솔루션:

CSS만 사용하여 이 효과를 얻으려면 두 가지 주요 접근 방식은 다음과 같습니다.

• 수정하려는 요소(F)는 마우스를 올려 놓은 요소의 하위 요소(E)이거나
• F는 나중에- E의 형제 또는 하위 형제(E는 마크업/DOM에서 F 앞에 나타남).

첫 번째 옵션: F를 E의 하위로

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

<code class="css">.item:hover .wrapper {
    color: #fff;
    background-color: #000;
}</code>

이 선택기는 .item 요소를 마우스로 가리킬 때만 지정된 CSS 규칙을 .wrapper 요소에 적용합니다.

두 번째 옵션: F를 E의 형제 요소로 사용

F가 E의 형제 요소인 경우 다음 CSS 선택기를 사용할 수 있습니다.

<code class="css">.item:hover ~ .wrapper {
    color: #fff;
    background-color: #000;
}</code>

이 선택기는 .wrapper가 .item의 직계 형제라고 가정하고 .item 요소를 마우스로 가리킬 때만 .wrapper 요소에 CSS 규칙을 적용합니다. .wrapper가 사이에 다른 요소가 없는 .item의 직계 형제인 경우 .item:hover .wrapper를 사용할 수도 있습니다.

JavaScript 솔루션:

CSS만으로는 원하는 효과를 얻을 수 없으면 JavaScript를 사용할 수 있습니다. 다음은 간단한 예입니다.

<code class="javascript">document.getElementsByClassName('item')[0].onmouseover = function() {
    document.getElementsByClassName('wrapper')[0].style.background = "url('some url')";
};</code>

이 JavaScript 코드는 .item 요소를 마우스로 가리키면 .wrapper 요소의 배경 속성을 수정합니다. 이 솔루션은 CSS 전용 접근 방식만큼 효율적이거나 우아하지 않습니다.

결론:

CSS 또는 JavaScript를 사용하면 한 클래스의 CSS를 수정할 수 있습니다. 다른 클래스의 호버링을 기반으로 합니다. 효율성과 단순성으로 인해 CSS 전용 솔루션이 더 바람직하지만 CSS가 충분하지 않은 경우 JavaScript를 사용할 수 있습니다.

위 내용은 :hover를 사용하여 다른 클래스의 CSS를 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!