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

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

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

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

  CSS 솔루션

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

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

  설명:

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

    예

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

    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    
    <style>
      li {
        float: left;
        width: 33.33%;
        line-height: 50px;
        background: gray;
        list-style-type: none;
      }
      ul:hover li {
        opacity: 0.5;
      }
      ul li:hover {
        opacity: 1;
      }
    </style>

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

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