When the mouse is hovering over the style a, the background color of a is set to yellow.
PHP中文网用户-9291898
PHP中文网用户-9291898 2022-09-22 19:25:53
0
1
853

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.

PHP中文网用户-9291898
PHP中文网用户-9291898

reply all(1)
WBOY

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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template