Home >Web Front-end >CSS Tutorial >How to use pseudo-class hover
How to use pseudo-class hover
- php中世界最好的语言Original
- 2018-03-21 16:20:482959browse
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>
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>
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!