CSS에서 다른 요소를 줄이는 동시에 호버 요소 불투명도를 유지하는 방법은 무엇입니까?

호버가 있는 요소를 제외한 요소에 가변 불투명도 달성

태그가 있고 상위 요소에 마우스를 올렸을 때 모든 태그의 불투명도를 낮추고 싶습니다. 그러나 직접 마우스로 가리킨 요소에 대해서는 불투명도가 변경되지 않고 유지되기를 원합니다.

이는 CSS를 사용하여 수행할 수 있습니다. 상위 요소에 호버 스타일을 적용하고 호버된 요소에 대해 이를 되돌리면 원하는 효과를 얻을 수 있습니다.

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

이 기술은 다음과 같이 작동합니다.

• 상위 요소가
  요소에 마우스를 올리면 모든
  • 그 안에 있는 요소의 불투명도는 0.5로 감소합니다.
• 특정
• 요소,
  적용하여 불투명도를 0.5로 줄입니다. 그러나 호버링된
  • 불투명도를 다시 1로 재설정합니다.

  이렇게 하면 모든

• 마우스로 올려진 요소를 제외한 요소의 불투명도는 감소하지만 마우스로 올려진 요소는 영향을 받지 않습니다.

  예

  다음은 이 기술을 보여주는 간단한 HTML 및 CSS 예입니다.

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

  li {
    float: left;
    width: 33.33%;
    line-height: 50px;
    background: grey;
    list-style-type: none;
  }
  ul:hover li {
    opacity: 0.5;
  }
  ul li:hover {
    opacity: 1;
  }

  참고: 이 기술을 사용하면 호버 상호 작용이나 기타 이벤트를 기반으로 다양한 요소에 다양한 불투명도 효과를 얻을 수 있습니다.

  위 내용은 CSS에서 다른 요소를 줄이는 동시에 호버 요소 불투명도를 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!