jQuery mouse move event
In this section, we will learn about the jQuery mouse move event handler.The mouse move events occured when the mouse pointer goes through on the component then action will fired.
Mouse move event helps us to perform an event through the mouse pointer will move on the component.
Now, you will easily understand with an appropriate example to handle the jquery mouse move event.
The syntax for the mouse move event as follows:
Sysntax:
<script type="text/javascript">
$(document).ready ( function(){
var num = 0;
$('div#firstId').mousemove(function (){
$('div#countId').html(num);
num++;
});
});
</script>
Above script is written within the <head></head> tag on document ready state.
Following is jquery code to handle the mose over event. If your mouse pinter will move over on the div id "firstId". Then the div id "countId" has been update by the some counter . The mouse over event handler is written in bellow code or snipts.
<html>
<head>
<title>jQuery mouse move</title>
<script type="text/javascript" language="javascript"
src="../scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready ( function(){
var num = 0;
$('div#firstId').mousemove(function (){
$('div#countId').html(num);
num++;
});
});
</script>
</head>
<body>
<h1>Mouse move event example</h1>
<div id="firstId"><span style="background-color:#FFFF00">
Come Your Mouse Pointer And Move</span></div><br><br>
<div id="secondId" style="height:50px; width:100px;
background-color:#CC99FF">Count:<div id="countId">0</div>
</div>
</body>
</html>
|
If you want to try it then you click on bellow link and test it.
Try online
