CSS で非アクティブなメニュー項目を暗く表示しながら、アクティブなメニュー項目を強調表示する方法

アクティブなメニュー項目を強調表示し、非アクティブなメニュー項目を暗くする方法

このコード スニペットでは、暗くしたいシナリオに遭遇します。親メニュー (

) をホバーしたときのすべてのメニュー項目 (
• 要素) の不透明度。ただし、ホバーされたメニュー項目自体は完全な不透明のままにする必要があります。

  CSS ソリューション

  この効果を実現するには、CSS を利用してメニューの不透明度を動的に調整します。項目:

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

  説明:

  • 最初のルール (ul:hover li) は、すべての
  • に不透明度 0.5 を適用します。要素の親
    がホバリングされます。これにより、現在マウスオーバーされていないメニュー項目が薄暗くなります。
  • 2 番目のルール (ul li:hover) は、
  • の不透明度を 1 にリセットします。実際にマウスオーバーされている要素。これにより、現在のメニュー項目が完全に表示されたままになります。

  例

  次の 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% 透明になり、ホバーした
  • は 50% 透明になります。要素は完全な不透明のままになります。これにより、微妙なハイライト効果が作成され、ユーザーをアクティブなメニュー項目に誘導します。

  以上がCSS で非アクティブなメニュー項目を暗く表示しながら、アクティブなメニュー項目を強調表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。