When the mouse is hovering over the style a, the background color of a is set to yellow.
This means: when the mouse is hovering over the style a, the background color of a is set to yellow
1
2
3
4
a:hover
{
background-color:yellow;
}
This is the most common usage, it just changes the style through a
Usage 2:
Use a Control the style of other blocks:
Use a to control the child element b of a:
1
2
3
.a:hover .b {
background-color:blue;
}
Use a to control a's sibling element c (sibling element):
1
2
3
.a:hover .c {
color:red;
}
Use a controls the nearest element d of a:
1
2
3
.a: hover ~ .d {
color:pink;
}
To summarize:
1 . Add nothing to control the child elements in the middle;
2. ' ' controls the same level element (sibling element);
3. '～' controls the nearby element;
Example
Use a button to control the movement state of a box. When the mouse moves over the button, the box stops moving. When the mouse moves away, the box continues to move.
