Guide to using hover method and toggle method in jQuery_jquery

jQuery provides some methods (such as: toggle) to merge two event effects together, such as: mouseover, mouseout; keyup, keydown, etc.

1. hover function

hover(over,out) A method that simulates hover events (the mouse moves over an object and out of the object). This is a custom method that provides a "keep in it" state for frequently used tasks.
Parameters:
Over (Function): The function to be triggered when the mouse moves over the element.
out (Function): The function to be triggered when the mouse moves out of the element.

Copy code The code is as follows:

2. toggle function

toggle(fn,fn) switches the function to be called each time it is clicked. If a matching element is clicked, the first function specified is triggered, and when the same element is clicked again, the second function specified is triggered. Each subsequent click repeats the call to these two functions in turn. Can be deleted using unbind("click").

Copy code The code is as follows:

The

toggle() method switches the visible state of an element.
Hide the selected elements if they are visible, and show them if the selected elements are hidden. The toggle() method switches the visible state of an element.
Hide the selected elements if they are visible, and show them if the selected elements are hidden.

So the above code can also be written as:

Copy code The code is as follows:

You can also add some css styles:

Copy code The code is as follows:

Have you guys gained a new understanding of the common hover events and toggle events in jQuery? I hope this article can bring you some help.