When the mouse is hovering over the style a, the background color of a is set to yellow.

Question

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.

Answer 1

The adjacent sibling selector ( ) can select the element immediately after another element, and both have the same parent element

The sibling selector (~) can find the element behind a specified element All sibling nodes