Home > Web Front-end > CSS Tutorial > How to use pseudo-class hover

How to use pseudo-class hover

php中世界最好的语言
Release: 2018-03-21 16:20:48
Original
2930 people have browsed it

This time I will bring you how to use pseudo-hover. What are the precautions when using pseudo-hover? The following is a practical case, let’s take a look.

Due to the animation effect added by the hover pseudo-class, it will only be triggered when the mouse is placed on the element. When the mouse leaves, the effect will be interrupted and it will appear very stiff.

Most people's idea is to use js's onmouseover and onmouseleave events to achieve animation effects. In fact, it doesn’t have to be so troublesome, CSS3 can help you solve these problems.

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>离开时效果生硬</title>
        <style type="text/css">
            p{
                width: 100px;
                height: 100px;
                border:1px solid;
    
                margin:0px auto;
                margin-top: 200px;
            }
            p:hover{
                transform: scale(2);
                transition: all 1s linear;
            }
        </style>
    </head>
    <body>
        <p></p>
    </body>
    </html>
Copy after login

Because the p element can only be added to the p element when the :hover pseudo-class is triggered.

When the mouse leaves the p element, the :hover pseudo-class will no longer take effect, and the animation effect written in hover will be lost instantly.

At this time, we should write an identical transition effect on the original element to continue the interrupted animation effect.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单解决</title>
    <style type="text/css">
        p{
            width: 100px;
            height: 100px;
            border:1px solid;
            margin:0px auto;
            margin-top: 200px;
            /* 在原本元素上再加一个transition */
            transition: all 1s linear;
        }
        p:hover{
            transform: scale(2);
            transition: all 1s linear;
        }
    </style>
</head>
<body>
    <p></p>
</body>
</html>
Copy after login

At this time, no matter when the mouse leaves the element, it will return unchanged.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Unpopular CSS properties you don’t know

What are href, src, link and @import? The difference

#How can the absolute positioning of css be compatible with all resolutions

The above is the detailed content of How to use pseudo-class hover. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template