Hover in CSS to do mask flicker problem

This time to bring you CSS in the hover to do the mask flicker problem, CSS hover do cover the attention of the matter, the following is the actual case, together to see.

The specific code looks like this:

<p id= "P2" ></p><p id= "p3" ><p> Hello </p></p>

This is the HTML code part, originally wanted to do a mask effect, when the mouse moved to the P2, P3 will appear slightly cover P2.

So the first CSS code is like this

After the completion of the discovery of a problem, that is, the mouse moved to the P2 when the P3 will not stop flashing. This is not the effect I want, so I went to find a lot of information, finally found the reason

It turns out that when the mouse moves to P2, P3 will appear, so the mouse will be on the P3, not on the P2. So P2 will disappear again, so again and again.

The solution is also very simple, replace the P2:hover code with the following can be solved perfectly.

The final effect is as follows

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:

How the hover selector is used

CSS to make a picture background filled hexagon