ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS を使用してホバー時に兄弟要素の色を変更するにはどうすればよいですか?

CSS を使用してホバー時に兄弟要素の色を変更するにはどうすればよいですか?

Mary-Kate Olsen
リリース: 2024-12-13 05:49:18
オリジナル
224 人が閲覧しました

How Can I Change the Color of Sibling Elements on Hover Using CSS?

CSS を使用してホバー時に兄弟要素の色を変更する方法

HTML では、要素が兄弟である、つまり要素が共有していることがよくあります。同じ親要素。特定の要素の上にマウスを移動すると、その兄弟要素の外観を変更することができます。ただし、前の兄弟のスタイルを設定する場合、CSS には制限があります。

解決策:

CSS を使用すると、ホバーされた要素に続く兄弟要素をターゲットにすることができます。例:

h1 {
    color: #4fa04f;
}
h1 + a {
    color: #a04f4f;
}
ログイン後にコピー

このコードは、最初の

の色を設定します。緑とその隣の に向かってください。リンクを赤にします。

の上にマウスを移動したときにリンクの色を変更するには、見出しに、:hover 疑似クラス:
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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート