マウスオーバーした項目を除いてリスト項目を半透明にするにはどうすればよいですか?

ホバーされた要素を除く要素で部分的な不透明度を達成する

この調査の目的は、要素の不透明度を選択的に下げる可能性を探ることです。 、具体的には項目をリストします (li)。現在ホバーされている項目は除外されます。この効果は、ホバーされた要素を強調表示する視覚的なキューをエミュレートします。

CSS ソリューションの採用

この動作を実現するには、Cascading Style Sheets (CSS) を利用します。ルール:

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

説明

• 最初のルールは、ホバーされた親リスト (ul) 要素内のすべてのリスト項目の不透明度を 0.5 に設定します。
• 2 番目のルールは、ホバーされたリスト項目の前のルールをオーバーライドします。不透明度を 1 に戻し、効果的に不透明にします。

実装

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

li {
  float: left;
  width: 33.33%;
  line-height: 50px;
  background: grey;
  list-style-type: none;
}
ul:hover li {
  opacity: 0.5;
}
ul li:hover {
  opacity: 1;
}

このデモは、すべてのリスト項目が必要な効果を示しています。ただし、現在ホバーされている要素は、親リスト要素をホバーすると半透明に表示されます。ホバーされたアイテムは完全に不透明のままで、その存在が強調されます。

以上がマウスオーバーした項目を除いてリスト項目を半透明にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。