Why does the layer flicker when the mouse moves in the onmouseover event in JavaScript?

    
 
 
 
   图片一  
 
   图片二  
 
   图片三  
 
 
 APP详情1 
 
 APP详情2 
 
 APP详情3 
 

The effect achieved is that when the mouse is placed on the picture, a description of the picture will be displayed. However, when the mouse is placed on it, it will flash continuously. Please know the reason

The reason is very simple:
After span.des appears, it covers img. That is to say, your mouse is no longer on img at this time, but on span.des. So you trigger the mouseout event of img with a slight movement, and then span.des disappears naturally due to ClearDes. After disappearing, the mouse is equivalent to being on img again, so the mouseover event is immediately triggered, ShowDes is called, and span.des is displayed...

So it keeps flashing.

Since you only asked about the reason, I will not answer the general solution. A solution for newer browsers: Add pointer-events: none;

to the CSS of .des. Each of your pictures and text is included in a div, and listen to the events of this div. . I changed it slightly based on your code

In browsers that support div:hover{ /* ... */ }, this effect does not require JS. As follows:

  内容

.photo span{ display: none; /* ...其余样式... */}.photo:hover span{ display: block; }

For browsers that support mouseenter and mouseleave events, binding these two events can solve the problem! For those that are not supported, you can simulate enter and leave by making some judgments in the handlers of the mouseover and mouseout events!

Try using mouseenter and mouseleave, it should solve this problem. In the past, I used these two to solve the flickering problem under IE browser.

The above is the detailed content of Why does the layer flicker when the mouse moves in the onmouseover event in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!