CSS를 사용하여 마우스로 가리킨 요소를 제외한 모든 요소를 ​​어둡게 하려면 어떻게 해야 합니까?

호버를 제외한 모든 요소의 불투명도 줄이기

CSS에서는 요소의 불투명도를 조정하여 투명도를 제어할 수 있습니다. 마우스로 가리킨 요소를 제외한 모든 요소의 불투명도를 줄이는 효과를 얻으려면 다음 단계를 따르세요.

• 모든 요소에 대해 더 낮은 불투명도를 설정합니다. 더 낮은 불투명도 값을 적용하여 시작합니다. 불투명도 속성을 사용하여 대상 컨테이너 내의 모든 요소에 적용됩니다. 이렇게 하면 호버링된 요소는 영향을 받지 않은 채 가시성이 감소됩니다. 예:

ul:hover li {
  opacity: 0.5;
}

• 호버된 요소의 불투명도를 재설정합니다. 호버된 요소를 눈에 띄게 만들려면 불투명도를 기본값인 1로 복원합니다. 값. 다음을 사용하여 이를 달성할 수 있습니다.

ul li:hover {
  opacity: 1;
}

참고: 이 규칙은 호버 효과를 트리거하는 ul 컨테이너 내의 li 요소에 적용됩니다.

예:

다음을 고려하세요. 코드:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

ul:hover li {
  opacity: 0.5;
}
ul li:hover {
  opacity: 1;
}

목록 항목(

) 위로 마우스를 가져가면 다른 모든 목록 항목은 불투명도가 50%로 사라지지만 마우스를 올린 항목은 완전히 표시됩니다.

위 내용은 CSS를 사용하여 마우스로 가리킨 요소를 제외한 모든 요소를 ​​어둡게 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!