How to use pseudo-class hover

This time to everyone to bring the use of pseudo-class hover, the use of pseudo-class hover note what, the following is the actual case, together to see.

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

Most people's idea is to use the JS onmouseover and OnMouseLeave events to achieve animation effects. In fact, it needn't be so troublesome, CSS3 can help you solve these problems.

<! DOCTYPE html>    
The effect can be added to the P element only if the P element is triggered by the hover pseudo-class.

When the mouse leaves the P element,: hover pseudo-class will no longer take effect, instantly lose hover in the animation effect written.

At this point, we should write an identical transition effect on the original element, and will leave the animation effect of the broken off on the continuation.

<! DOCTYPE html>
At this point, no matter when the mouse leaves the element, it will return as it is.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

You don't know the upset CSS properties

What is the difference between href and src, link, and @import?

How the absolute positioning of CSS is compatible with all resolutions