CSS로 비활성 메뉴 항목을 어둡게 하면서 활성 메뉴 항목을 강조하는 방법은 무엇입니까?

활성 메뉴 항목을 강조 표시하고 비활성 항목을 어둡게 하는 방법

이 코드 조각에서 어둡게 하고 싶은 시나리오에 직면합니다. 상위 메뉴(

)에 마우스를 올렸을 때 모든 메뉴 항목(
• 요소)의 불투명도입니다. 그러나 마우스를 올린 메뉴 항목 자체는 완전한 불투명도로 유지되어야 합니다.

  CSS 솔루션

  이 효과를 얻기 위해 CSS를 활용하여 메뉴의 불투명도를 동적으로 조정합니다. 항목:

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

  설명:

  • 첫 번째 규칙(ul:hover li)은 모든
  • 요소의 부모가
    맴돌고 있습니다. 현재 마우스를 올려 놓지 않은 메뉴 항목이 어두워집니다.
  • 두 번째 규칙(ul li:hover)은
  • 실제로 마우스로 가리키고 있는 요소입니다. 이렇게 하면 현재 메뉴 항목이 전체 표시 상태로 유지됩니다.

  예

  다음 HTML 및 CSS 코드를 고려하세요.

  • Item 1
  • Item 2
  • Item 3
  요소, 모두
  • 마우스를 올려놓은 요소를 제외한 요소는 50% 투명해지며, 마우스를 올려놓은
  • 요소는 완전한 불투명도를 유지합니다. 이는 미묘한 하이라이트 효과를 만들어 사용자를 활성 메뉴 항목으로 안내합니다.

위 내용은 CSS로 비활성 메뉴 항목을 어둡게 하면서 활성 메뉴 항목을 강조하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!