CSS で他の要素の不透明度を下げながら、ホバーされた要素の不透明度を維持するにはどうすればよいですか?

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

これは CSS を使用して実現できます。ホバー スタイルを親要素に適用し、ホバー スタイルをホバーされた要素に戻すことで、目的の効果を実現できます。

• このテクニックは次のように機能します。
• 親要素が
  要素がホバーされ、すべての
  • その中の要素の不透明度は 0.5 に減ります。

  特定の

• の上にカーソルを置くと、要素、
  のホバー スタイル。が適用され、不透明度が 0.5 に下がります。ただし、ホバーされた
  • のホバー スタイルは、不透明度を 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;
    }

    ログイン後にコピー
    これを示す簡単な HTML と CSS の例を次に示します。テクニック:
    注: このテクニックは、ホバー操作やその他のイベントに基づいて、さまざまな要素にさまざまな不透明効果を実現するために使用できます。

  以上がCSS で他の要素の不透明度を下げながら、ホバーされた要素の不透明度を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。