CSS で別の要素にカーソルを合わせたときに要素の外観を変更する方法

CSS を使用して別の要素の上にマウスを置いたときに要素の外観を変更する

CSS スタイルの領域では、1 つの要素の外観を変更することが望ましい場合がよくあります。カーソルが別の上に移動したとき。これは、セレクターと :hover 疑似クラスの組み合わせによって実現できます。

次のシナリオを考えてみましょう。コンテナ要素 (例: div) と隠し要素 (例: 別の div) があります。には追加情報が含まれています。マウスをコンテナー要素の上に置くと、非表示の要素が表示され、その内容が表示されます。

提供された例では、

<div>

a:hover + #hidden {
  background-color: orange;
  color: orange;
}

残念ながら、このアプローチはそうではありません。 #hidden div は a 要素の直接の子ではないため、機能しません。この問題を解決するには、非表示の要素がホバー効果をトリガーする要素の子であることを確認します。

<div>

この変更により、a:hover #hidden セレクターは非表示の要素を正しく識別します。要素の上にカーソルを置いたら、目的のスタイルを適用します。

以上がCSS で別の要素にカーソルを合わせたときに要素の外観を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。