jquery mousemove event mouse slides over the picture

Problems that need to be solved: When the mouse is parked on picture, the relevant information of the current picture,

My first feeling is to use the mouseevent: mousemove can trigger the corresponding display event when he/she stays on the picture, and trigger the hidden event when mouseout leaves

However, in the actual completion, it was found that: the information will be displayed when the mouse stays on the picture. It keeps shaking. After checking the relevant information, I found that the manual's explanation of the mouseover event is:

Note: When the user moves the mouse one pixel, a mousemove event will occur. Handling all mousemove events consumes system resources. Please use this event with caution.

In other words: Even if our mouse jitters by one pixel, the display event will be triggered. No wonder it will cause the resource of image information

Solution The solution is: use hover. The official manual explains this method:

A method that imitates a hover event (the mouse moves to an object and moves out of the object). This is a custom method that provides a "keep in it" state for frequently used tasks.

When the mouse moves over a matching element, the specified first function will be triggered. When the mouse moves out of this element, the specified second function will be triggered. Moreover, it will be accompanied by detection of whether the mouse is still in a specific element (for example, an image in p). If so, it will continue to remain in the "hover" state without triggering the move-out event (modification Corrected a common mistake when using the mouseout event).

Example code:

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

The above is the detailed content of jquery mousemove event mouse slides over the picture. For more information, please follow other related articles on the PHP Chinese website!