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 コードを考えてみましょう:

  • Item 1
  • Item 2
  • Item 3
  の上にカーソルを置くと、要素、すべて
  • ホバーしている要素以外の要素は 50% 透明になり、ホバーした
  • は 50% 透明になります。要素は完全な不透明のままになります。これにより、微妙なハイライト効果が作成され、ユーザーをアクティブなメニュー項目に誘導します。

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