How to use pseudo-class hover-CSS Tutorial-php.cn

How to use pseudo-class hover

php中世界最好的语言

Release： 2018-03-21 16:20:48

Original

2922 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!