jQuery Tutorial Tutorials - jQuery .mouseover() method

The .mouseover() method in jQuery is used to run a function when the mouse pointer is over an elements, or trigger the mouseover event on an element.

When the mouse pointer is over the element (including child elements), the event mouseover is fired.

jQuery .mouseover() method Syntax

.mouseover()
.mouseover(handler)
.mouseover(eventData,handler)

.mouseover(handler) and .mouseover(eventData,handler) are shortcut for .on( "mouseover", handler )
.mouseover() is shortcut for .trigger( "mouseover" )

• mouseover is relative to mouseout

jQuery .mouseover() method Example

example

Trigger the mouseover event on target:
HTML

<div id="target">target</div>
<div id="btn">
  Trigger mouseover event on target
</div>

jQuery

$( "#target" ).mouseover(function() {
    console.log( "mouseover." );
});

$("#btn").click(function(){
    $( "#target" ).mouseover();
}

jQuery .mouseover([eventData,]handler) method Example

example

Following is a simple example which change the element's background color when the mouse pointer is over or out of the element.

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

Try now

jQuery .mouseover() VS .mouseenter()

The difference between .mouseover() and .mouseenter() is:

• mouseover fires when the pointer moves into the child element as well.(the mouse pointer is over the element).
• mouseenter fires only when the pointer enters the bound element.

Try now