jQuery mousemove() Method
The jQuery mousemove() method is an inbuilt method which is used when mouse pointer moves over the selected element.
Syntax:
$(selector).mousemove(function)
Parameters: This method accepts single parameter function which is optional. This parameter is used to specify the function to run when the mousemove event is call.
Below examples illustrates the mousemove() method in jQuery:
Example 1: This example illustrates the use of mousemove() method.
HTML
<!DOCTYPE html>
< html >
< head >
< title >The mousemove Method</ title >
< script src =
</ script >
< script >
$(document).ready(function () {
$("p").mousemove(function () {
$("div").css("background-color", "lightgreen");
});
});
</ script >
< style >
div {
width: 380px;
padding: 20px;
height: 60px;
border: 2px solid green;
font-weight: bold;
font-size: 20px;
}
</ style >
</ head >
< body >
< div >
< p >Move over this paragraph.</ p >
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, a pop-up will come out when we move the mouse over the paragraph.
HTML
<!DOCTYPE html>
< html >
< head >
< title >The mousemove Method</ title >
< script src =
</ script >
< script >
$(document).ready(function () {
$("p").mousemove(function () {
alert("Mouse moved over this paragraph");
});
});
</ script >
< style >
div {
width: 380px;
padding: 20px;
height: 60px;
border: 2px solid green;
font-weight: bold;
font-size: 20px;
}
</ style >
</ head >
< body >
< div >
< p >Move over this paragraph.</ p >
</ div >
</ body >
</ html >
|
Output:
Last Updated :
18 Nov, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...