jQuery mouseover() method

jQuery Events

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

The mouseover event occurs when the mouse pointer enters an element and its child elements.

You might think mouseover,mouseenterandmousemoveThe events are the same, but they are not:

• mouseover-is called when the mouse pointer enters the element and its child elements

• mouseenter-is called only when the mouse pointer enters the element

• mousemove-to call when the mouse pointer is moved to the element (see the following examples)

The mouseover() method is usually used withmouseout()Methods used together.

Syntax:

Trigger the mouse hover event of the selected element:

$(selector).mouseover()

Attach function to mouseover event:

$(selector).mouseover(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 mouseenter, mousemove, and mouseover:

Parameter Value

jQuery Events