jQuery Tutorial Tutorials - jQuery .mousemove() method

The .mousemove() method in jQuery is used to bind an event handler to the mousemove event or trigger the mousemove event on an element.

When the mouse pointer moves inside the element(including child elements), the event mousemove is fired.

jQuery .mousemove() method Syntax

.mousemove()
.mousemove(handler)
.mousemove(eventData,handler)

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

jQuery .mousemove() method Example

example

Trigger the mousemove event on target:
HTML

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

jQuery

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

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

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

example

Following is a simple example which change the element's background color when the mouse pointer enters or leaves the element.

function toHex(d) {
    return  ("0"+(Number(d).toString(16))).slice(-2).toUpperCase()
}
function randColor(){
    return ('#'+toHex(Math.round(Math.random() * 255))+toHex(Math.round(Math.random() * 255))+toHex(Math.round(Math.random() * 255)));
}

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

Try now

example

Show the mouse coordinates which are relative to the window, which in this case is the iframe.

Try now