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 サイトの他の関連記事を参照してください。