CSS を使用してホバーされていないリスト項目を半透明にする方法

ホバーされていない要素の不透明度の操作

HTML マークアップでは、以下を除くすべてのリスト項目 (LI) の不透明度を動的に調整できます。現在ホバリングされているもの。この手法は、ホバーされた項目が完全に表示されたままで、ホバーされていない要素が微妙に透明になる効果を作成します。

これを実現するには、CSS を活用できます。

ul:hover li {
  opacity: 0.5;
}

ul li:hover {
  opacity: 1;
}

このコード スニペットでは、

• 最初の行は、すべての LI (ホバーされた項目を除く) の不透明度を 50% に下げます。
• 2 行目では、ホバーされた LI の不透明度が 1 に保たれ、不透明に保たれます。

HTML 例:

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

CSSスタイル:

ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

li {
  width: 100px;
  height: 100px;
  background-color: gray;
  margin-right: 10px;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

ul:hover li {
  opacity: 0.5;
}

ul li:hover {
  opacity: 1;
}

結果:

LI の上にマウスを置くと、その不透明度は 1 のままですが、他のすべての LI は半透明になります。透明。これにより、現在アクティブな要素の視覚的な手がかりが得られます。

以上がCSS を使用してホバーされていないリスト項目を半透明にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。