CSS を使用してホバー時に兄弟要素の色を変更する方法
HTML では、要素が兄弟である、つまり要素が共有していることがよくあります。同じ親要素。特定の要素の上にマウスを移動すると、その兄弟要素の外観を変更することができます。ただし、前の兄弟のスタイルを設定する場合、CSS には制限があります。
解決策:
CSS を使用すると、ホバーされた要素に続く兄弟要素をターゲットにすることができます。例:
h1 { color: #4fa04f; } h1 + a { color: #a04f4f; }
このコードは、最初の
h1:hover + a { color: #4f4fd0; }
注:
CSS では前の兄弟の色を変更することはできません。以前の兄弟のスタイルを設定する場合は、追加機能を提供する JavaScript または CSS フレームワークの使用を検討してください。
ラッパー要素を使用した例:
要素をラップするID を持つコンテナー (<div>) は CSS ルールを変更しません。上記と同じ原則に従います:
<div>
#banner h1 { color: #4fa04f; } #banner h1 + a { color: #a04f4f; } #banner h1:hover + a { color: #4f4fd0; }
以上がCSS を使用してホバー時に兄弟要素の色を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。