Js/jquery Implementing Mouse Event Control page element explicit (code instance)

This chapter gives you to use Js/jquery to realize the mouse event control page element Explicit effect, there is a certain reference value, the need for friends can refer to, I hope to help you.

First, mouseout and MouseLeave

For the mouse pointer to move in and out, it involves the mouseover, mouseout, and MouseLeave events.

MouseOver: The event is triggered when the mouse pointer moves over the target element;

Mouseout: This event is triggered when the mouse pointer moves out of the target element or its child elements;

MouseLeave: The event is triggered only when the mouse pointer moves out of the target element;

There is a need to pay special attention to the difference between mouseout and MouseLeave. Let's look at the following code example:

<! DOCTYPE html>
：





Ii. Fadein and Fadeout

The previous example uses the show () and Hide () method, the foreground explicit effect instantaneous completion, in order to improve the actual user experience, here we introduce two more friendly "friends", namely Fadein and fadeout.

FadeIn: Method uses a fade-in effect to display the target element.

FadeOut: Method uses fade effect to hide target elements

These two methods can be configured with parameters to control the speed, such as slow, normal, fast, or the specified number of milliseconds.

Here we compare the effects of show (), Hide () with Fadein (), FadeOut (), with the following code:

<! DOCTYPE html>
The mouse does not move up:


The mouse moves up: