Detailed explanation of how to use CSS:hover pseudo-class selector (with code)

In order to make the page dynamic at work, front-end developers often add mouse pass and mouse out effects to the page to make the page more attractive. This article will tell you about the hover event in CSS, how to use CSS:hover,and use code to explain how to use CSS:hover to change color. Friends who are in need, please continue reading.

Careful friends will find that hover is used on almost every website. Hover is generally applied to elements such as buttons, logos, and pictures, but sometimes mouseover and mouseout are also used. Events, but JavaScript is more troublesome. It is recommended to use CSS if it can be solved with CSS, which can improve performance. Next, let’s talk about how to use hover in detail.

1. Definition and usage

Definition: hover can add special styles when the mouse moves over the link.

Usage: selector: hover{attribute: attribute value}
For example:
a:hover{background-color:yellow;}
.aa:hover{color:#FFF; background:#0C0;}

Hover-related pseudo-classes:

The :hover selector can be used on all elements, not just links.
:link selector sets the link style of unvisited pages,
:visited selector sets the style of visited page links
:active selector sets the style when you click the link

Note: To produce the desired effect, :hover must be placed after :link and :visited.

2. CSS:hover method example

Instance description: When the mouse enters the div, the div gradually becomes larger. When the mouse moves out, the div gradually becomes larger. Small, back to the original style. This is achieved using the CSS hover event.

HTML part:

<div class="aa"></div>

CSS part:

.aa{
            width: 100px;
            height: 100px;
            background-color: blue;
            -webkit-transition: transform 2s linear;
            -moz-transition: transform 2s linear;
            -ms-transition: transform 2s linear;
            -o-transition: transform 2s linear;
            transition: transform 2s linear;
        }
        .aa:hover{
            -webkit-transform: scale(2);
            -moz-transform: scale(2);
            -ms-transform: scale(2);
            -o-transform: scale(2);
            transform: scale(2);
        }

Rendering:

##The picture on the left is The style before the mouse is moved in. The picture on the right is the style after the mouse is moved in.

Note: The above describes how to use CSS:hover, which is relatively simple. It should be noted that when hover changes the style of elements at the same level, it changes the style of adjacent sibling elements, that is, the style of one element; applying hover to change the style of the child elements of the element can work at the same time. Use pseudo-classes to change the styles of other elements. Other elements must be child elements of the hover element. There is no demonstration here, you can try it yourself.

The above is the detailed content of Detailed explanation of how to use CSS:hover pseudo-class selector (with code). For more information, please follow other related articles on the PHP Chinese website!