What is the use of hover in css?-CSS Tutorial-php.cn

What is the use of hover in css?

青灯夜游

Release： 2020-12-04 17:19:20

Original

11310 people have browsed it

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.

What is the use of hover in css?

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;
    }

Copy after login

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;
        }

Copy after login

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

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

Copy after login

Use a to control the nearby element d of a:

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

Copy after login

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:

<body>
    <div class="btn stop">stop</div>
    <div class="animation"></div>
</body>

Copy after login

css style:

<style>
    .animation {
        width: 100px;
        height: 100px;
        background-color: pink;
        margin: 100px auto;
        animation: move 2s infinite alternate;
        -webkit-animation: move 2s infinite alternate;
    }
    @keyframes move {
        0% {
            transform: translate(-100px, 0);
        }
        100% {
            transform: translate(100px, 0);
        }
    }
    .btn {
        padding: 20px 50px;
        background-color: pink;
        color: white;
        display: inline-block;
    }
    .stop:hover ~ .animation {
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
    }
</style>

Copy after login

For more related articles, please visit PHP 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!