スタイル a の上にマウスを置くと、 a の背景色が黄色に設定されます。
これは、マウスがスタイル 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. '～' は近くの要素を制御します;
例
#ボタンを使用して、ボックスの移動状態を制御します。マウスがボタン上に移動すると、ボックスの移動が停止します。マウスが離れると、ボックスは移動を続けます。
#
