CSS は、別の要素の上にマウスを置いたときに、ある要素の不透明度に影響を与えることができますか?

異なる要素の上にマウスを移動すると、要素は相互に影響を与えることができますか?

問題:

目的は、1 つの要素 (#thisElement) を別の要素 (img) の上にマウスを移動することで、その要素の不透明度を変更することです。 JavaScript を利用しています。

必要な機能:

「img」の上にマウスを移動すると、「img」の不透明度が 100% に増加し、「#thisElement」の不透明度が 100% に増加する必要があります。 ' は 30% に減少するはずです。

CSS制限事項:

残念ながら、CSS には別の要素のホバーに基づいて要素にスタイルを適用する機能がないため、CSS だけではこの効果を実現できません。

オプション隣接する要素への影響:

ただし、CSS は関連する要素のスタイルを変更できます。ホバーされた要素:

• 子孫: 子要素またはネストされた要素にスタイルを適用します。例:

  #parent_element:hover #child_element {
    opacity: 0.3;
  }

• 隣接する兄弟: ホバーされた要素の直後または直前の要素に影響します。例:

  #first_sibling:hover + #second_sibling {
    opacity: 0.3;
  }

提案された解決策:

指定された HTML 構造に基づき、'img' はネストせずにその直下に兄弟を持ちます。 、隣接する兄弟セレクターを利用できます:

img:hover + img {
    opacity: 0.3;
    color: red;
}

この CSS ルールホバーされた 'img' 要素に隣接する 'img' 要素の不透明度を調整します。

以上がCSS は、別の要素の上にマウスを置いたときに、ある要素の不透明度に影響を与えることができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。