CSS를 사용하여 마우스를 올리지 않은 목록 항목을 반투명하게 만드는 방법은 무엇입니까?

호버링되지 않은 요소의 불투명도 조작

HTML 마크업에서 다음을 제외한 모든 목록 항목(LI)의 불투명도를 동적으로 조정할 수 있습니다. 현재 호버링되고 있는 것. 이 기술은 마우스를 올려 놓은 항목이 완전히 보이는 동안 마우스를 올려 놓은 요소가 미묘하게 투명해지는 효과를 만들어냅니다.

이를 달성하기 위해 CSS를 활용할 수 있습니다.

ul:hover li {
  opacity: 0.5;
}

ul li:hover {
  opacity: 1;
}

이 코드 조각에서:

• 첫 번째 줄은 모든 LI(호버 항목 제외)의 불투명도를 50%로 줄입니다. 반투명하게 표시됩니다.
• 두 번째 줄은 마우스를 올려 놓은 LI의 불투명도를 1로 유지하여 불투명하게 유지하도록 합니다.

HTML 예:

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

CSS 스타일:

ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

li {
  width: 100px;
  height: 100px;
  background-color: gray;
  margin-right: 10px;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

ul:hover li {
  opacity: 0.5;
}

ul li:hover {
  opacity: 1;
}

결과:

LI 위로 마우스를 가져가면 불투명도가 1로 유지되고 다른 모든 LI는 반투명하게 됩니다. 투명한. 이는 현재 활성화된 요소에 대한 시각적 신호를 제공합니다.

위 내용은 CSS를 사용하여 마우스를 올리지 않은 목록 항목을 반투명하게 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!