Jquery mouse slide over image mousemove event

Source: Internet
Author: User

The problem to be solved: the information about the current image is displayed when you move your cursor over the image,

My first thought was to use the mouse event: When mousemove stays on the image, it will trigger the corresponding display event, and when mouseout leaves, it will trigger the hidden event.

However, during the actual completion, we found that the mouse stays on the image and the information is constantly jitters. After reading the relevant information, we found that the manual explains the Mouseover event as follows:

Note: When you move the mouse to a pixel, A mousemove event occurs. Processing all mousemove events consumes system resources. Use this event with caution.

That is to say, even if the mouse has a pixel jitter, it will trigger the display event. No wonder it will cause image information resources.


The solution is to use hover, which is explained in the official manual:

A method that imitates a hover event (move the mouse over an object and remove it. This is a custom method that provides a "Keep in it" status for frequently used tasks.

When you move the cursor over a matching element, the specified first function is triggered. When you move the cursor out of this element, the specified second function is triggered. In addition, it will be accompanied by detection of whether the mouse is still in a specific element (for example, an image in the Div). If yes, it will continue to remain in the "hover" state, instead of triggering the removal event (corrected a common error in using the mouseout event ).

Instance code:

$ ("TD "). hover (function () {$ (this ). addclass ("hover") ;}, function () {$ (this ). removeclass ("hover ");});

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.