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

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

문제:

목표는 다른 요소 위로 마우스를 가져가서 한 요소(#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 중국어 웹사이트의 기타 관련 기사를 참조하세요!