スタイル a の上にマウスを置くと、 a の背景色が黄色に設定されます。

Question

これは、マウスがスタイル a の上にあると、 a の背景色が黄色に設定されることを意味します。

1

2

3

4

a:hover

{

背景色:黄色;

}

これは最も一般的な使用法です。

使用法 2:

コントロールを使用してスタイルを変更するだけです。他のブロックのスタイル:

a を使用して、a の子要素 ​​b を制御します:

1

2

3

.a:hover .b {

背景色:青;

}

a を使用して a の兄弟要素 c (兄弟要素) を制御します:

1

2

3

.a:hover .c {

color:red;

}

使用a は、a に最も近い要素 d を制御します:

1

2

3

.a : hover ~ .d {

color:pink;

}

要約すると:

1 . 中間の子要素を制御するために何も追加しません;

2. ' ' は同じレベルの要素 (兄弟要素) を制御します;

3. '～' は近くの要素を制御します;

例

#ボタンを使用して、ボックスの移動状態を制御します。マウスがボタン上に移動すると、ボックスの移動が停止します。マウスが離れると、ボックスは移動を続けます。

#

Answer 1

隣接する兄弟セレクター () は、別の要素の直後の要素を選択でき、両方とも同じ親要素を持ちます。

兄弟セレクター (~) は、指定された要素の背後にある要素を検索できます。 すべての兄弟ノード