What is the use of hover in css?

In CSS, the ":hover" selector is used to select the element on which the mouse pointer is floating, and then set the style for it. The syntax format is "element:hover{css style};"; ":hover" is required Place after ":link" and ":visited" (if present) so that the style can take effect.

Related recommendations: "Programming Tutorial"

: The hover selector is used to select the element on which the mouse pointer is floating. .

Tip: The :hover selector can be used on all elements, not just links.

In the CSS definition, :hover must be placed after :link and :visited (if present) for the style to take effect.

: The link selector sets the style of links pointing to pages that have not been visited, the :visited selector is used to set links to pages that have been visited, and the :active selector is used for active links.

css :hover selector usage

Usage 1:

This What it means is: when the mouse is hovering over the style a, the background color of a is set to yellow

a:hover { background-color:yellow; }

This is the most common usage, it just changes the style through a

Usage 2:

Use a to control the style of other blocks:

Use a to control the sub-element b of a:

.a:hover .b { background-color:blue; }

Use a to control the brothers of a Element c (sibling element):

.a:hover + .c { color:red; }

Use a to control the nearby element d of a:

.a:hover ~ .d { color:pink; }

To summarize:

1. What’s in the middle Do not add Control child elements;

2. ' ' Controls sibling elements (sibling elements);

3. '～' Controls nearby elements;

Example

Use a button to control the motion 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.

body code:

 
stop
 
 

css style:

For more related articles, please visitPHP Chinese website! !

The above is the detailed content of What is the use of hover in css?. For more information, please follow other related articles on the PHP Chinese website!