How to use pseudo-class hover

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

Due to theanimationeffect 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'sonmouseoverandonmouseleaveevents to achieve animation effects. In fact, it doesn’t have to be so troublesome, CSS3 can help you solve these problems.

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.

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!