jQuery mousemove() method

jQuery Events

The mousemove() method triggers the mousemove event, or attach a function to run when the mousemove event occurs.

A mousemove event will occur when the mouse pointer moves over the selected element.

You might think mousemove,mouseenterandmouseoverThe events are the same, but they are not:

• mouseenter-Call only when the mouse pointer enters the element

• mousemove-Call when the mouse pointer is over the element

• mouseover-Call when the mouse pointer enters the element and its child elements (see the example below)

Syntax:

Trigger the mousemove event of the selected element:

$(selector).mousemove()

Attach the function to the mousemove event:

$(selector).mousemove(function)

Example

Display a random number when the mousemove event is triggered:

$("div").mousemove(function(){
　　$(this).text(Math.random());
});

Get the position of the mouse pointer in the page:

$(document).mousemove(function(event){　
　　$("#output").text("pageX: \u3000"　+　event.pageX　+　",　pageY:　"　+　event.pageY);
});

Change background color when mousemove event is triggered:

$("div").mousemove(function(){
　　$(this).css("background",　randColor());
});
//　Random color generation function
function　randColor()　{
　　return　'rgb('　+　Math.floor(Math.random()*256)　+　','　+　Math.floor(Math.random()*256)　+　
　　','　+　Math.floor(Math.random()*256)　+　')';
}

This example demonstrates the difference between mousemove, mouseenter, and mouseover:

Parameter Value

jQuery Events