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 ");});