jQuery mouseout() method

jQuery Events

The mouseout() method triggers the mouseout event, or attaches a function to be executed when the mouseout event occurs.

The mouseout event occurs when the mouse pointer is moved out of an element or one of its child elements.

You might think that mouseout andmouseleaveThe event is the same, but they are not:

• mouseout-It is called when the mouse pointer is moved out of an element or one of its child elements

• mouseleave-It is called only when the mouse pointer is moved out of the element (see the following example)

The mouseout() method is usually used withmouseover()Methods used together.

Syntax:

Trigger the mouseout event of the selected element:

$(selector).mouseout()

Attach function to mouseout event:

$(selector).mouseout(function)

Instance

Change background color when mouseover and mouseout events are triggered:

$("p").mouseover(function(){
　　$(this).css("background-color", "yellow");
});
$("p").mouseout(function(){
　　$(this).css("background-color", "lightblue");
});

This example demonstrates the difference between mouseleave and mouseout:

Parameter Value

jQuery Events