CSS を使用して、カーソルを置いた要素以外のすべての要素を暗くするにはどうすればよいですか?

ホバーされた要素を除くすべての要素の不透明度を下げる

CSS では、要素の不透明度を調整して透明度を制御できます。ホバーされた要素を除くすべての要素の不透明度を下げる効果を実現するには、次の手順に従います。

• すべての要素の不透明度を低く設定します。 まず、低い不透明度値を適用します。 opacity プロパティを使用して、ターゲット コンテナ内のすべての要素に適用します。これにより、ホバーされた要素は影響を受けずに、可視性が低下します。例:

ul:hover li {
  opacity: 0.5;
}

• ホバーされた要素の不透明度をリセットします。 ホバーされた要素を目立たせるには、不透明度をデフォルトの 1 に戻します。価値。これは、次のコマンドを使用して実現できます。

ul li:hover {
  opacity: 1;
}

注: これらのルールは、ホバー効果をトリガーする ul コンテナ内の li 要素に適用されます。

例:

次のように考えます。コード:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

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

リスト項目のいずれか (

) の上にマウスを置くと、他のすべてのリスト項目が 50% の不透明度にフェードアウトしますが、マウスを置いた項目は完全に表示されたままになります。

以上がCSS を使用して、カーソルを置いた要素以外のすべての要素を暗くするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。