>웹 프론트엔드 >CSS 튜토리얼 >CSS가 다른 요소 위로 마우스를 가져갈 때 한 요소의 불투명도에 영향을 미칠 수 있습니까?

CSS가 다른 요소 위로 마우스를 가져갈 때 한 요소의 불투명도에 영향을 미칠 수 있습니까?

DDD
DDD원래의
2024-12-09 17:43:11787검색

Can CSS Affect One Element's Opacity When Hovering Over a Different Element?

다른 요소 위로 마우스를 가져갈 때 요소가 서로 영향을 미칠 수 있습니까?

문제:

목표는 다른 요소 위로 마우스를 가져가서 한 요소(#thisElement)의 불투명도를 수정하는 것입니다. (img) JavaScript를 사용하지 않고.

원하는 기능:

'img' 위로 마우스를 가져가면 'img'의 불투명도가 100%로 증가하고 불투명도는 100%로 증가해야 합니다. '#thisElement'의 비율은 30%로 감소해야 합니다.

CSS 제한 사항:

안타깝게도 CSS만으로는 다른 요소를 가리키면 요소에 스타일을 적용하는 기능이 부족하기 때문에 이 효과를 얻을 수 없습니다.

옵션 이웃 요소에 영향을 미침:

그러나 CSS는 다음과 관련된 요소의 스타일을 변경할 수 있습니다. 마우스로 가리킨 요소:

  • 하위 요소: 하위 요소 또는 중첩 요소에 스타일을 적용합니다. 예:

    #parent_element:hover #child_element {
      opacity: 0.3;
    }
  • 인접 형제: 마우스를 올린 요소 바로 뒤 또는 앞의 요소에 영향을 줍니다. 예:

    #first_sibling:hover + #second_sibling {
      opacity: 0.3;
    }

제안된 솔루션:

주어진 HTML 구조를 기반으로 하며 'img'는 중첩 없이 바로 아래에 형제가 있습니다. , 인접한 형제 선택기를 활용할 수 있습니다:

img:hover + img {
    opacity: 0.3;
    color: red;
}

이 CSS 규칙 마우스를 올려 놓은 'img' 요소에 인접한 'img' 요소의 불투명도를 조정합니다.

위 내용은 CSS가 다른 요소 위로 마우스를 가져갈 때 한 요소의 불투명도에 영향을 미칠 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.