마우스로 가리킨 항목을 제외하고 목록 항목을 반투명하게 만들려면 어떻게 해야 합니까?

호버된 요소를 제외한 요소의 부분 불투명도 달성

이 문의 목적은 요소의 불투명도를 선택적으로 낮출 수 있는 가능성을 탐색하는 것입니다. , 구체적으로 항목 목록(li)을 지정하고 현재 마우스로 가리킨 항목은 제외합니다. 이 효과는 마우스로 가리킨 요소를 강조하는 시각적 신호를 에뮬레이션합니다.

CSS 솔루션 사용

이 동작을 수행하기 위해 CSS(Cascading Style Sheets)를 활용합니다. 규칙:

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

설명

• 첫 번째 규칙은 마우스를 올려 놓은 상위 목록(ul) 요소 내의 모든 목록 항목의 불투명도를 0.5로 설정합니다. 반투명합니다.
• 두 번째 규칙은 마우스를 올려 놓은 목록 항목에 대한 이전 규칙을 재정의하여 해당 항목을 복원합니다. 불투명도를 1로 설정하면 효과적으로 불투명하게 됩니다.

구현

<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;
}

이 데모는 원하는 효과를 보여줍니다. 현재 상위 목록 요소를 가리키면 요소가 반투명하게 나타납니다. 마우스를 올린 항목은 완전히 불투명한 상태로 유지되어 존재감을 강조합니다.

위 내용은 마우스로 가리킨 항목을 제외하고 목록 항목을 반투명하게 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!