Mouseover, mouseout and mousemove Events


mouseover


When you move your mouse over an element on a page, a mouseover event triggers. You can assign an event handler to a navigation button using this event and have a submenu pop up when a visitor mouses over the button. (If you’re used to the CSS :hover pseudo-class, then you know how this event works.)

mouseout


Moving a mouse off an element triggers the mouseout event. You can use this event to signal when a visitor has moved her mouse off the page, or to hide a pop-up menu when the mouse travels outside the menu.

Let us learn with a simple example.
br /> 

<html>
<head>

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
</head>
<div id="id1">
Point Mouse here, or remove it from here and see action. 
</div>

<script>

$('#id1').mouseout(function() {
 $("div#id1").text("mouse is out");
});


$('#id1').mouseover(function() {
 $("div#id1").text("mouse is over");
});

</script>
</body>
</html>


You may like to try this example here.

mousemove


The mousemove event triggers when the mouse moves - which means this event fires all of the time. You use this event to track the current position of the cursor on the screen. In addition, you can assign this event to a particular tag on the page a <div>h;, for example - and respond only to movements within that tag.

The coordinates of the mouse can be accessed using event.pageX and event.pageY. The .pageX and .pageY properties provide the X and Y coordinates of the mouse pointer relative to the top-left corner of the document. Let us take a look at the following example.

The following example prints the coordinate of the mouse at the current location as it moves.
br /> 

<html>
<head>

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
</head>
<div id="id1">
Point Mouse here, or remove it from here and see action. 
</div>
<script>

$('#id1').mousemove(function(event) {
  var msg = "Mouse is at " + event.pageX + ", " + event.pageY; 
 $("div#id1").text(msg);
});

</script>
</body>
</html>


You may like to try this example here.

The mousemove event is triggered whenever the mouse pointer moves, even for a singl pixel. This generates hundreds of events within a small amount of time. If the handler has to do any significant processing, this can be a serious performance drain on the browser. You may therefor like to optimize mousemove handlers as much as possible, and to unbind them as soon as they are no longer needed.

A common solution to enhance the efficiency is to bind the mousemove handler from within a mousedown hander, and to unbind it from a corresponding mouseup handler. If implementing this sequence of events, remember that the mouseup event might be sent to a different HTML element than the mousemove event was. To account for this, the mouseup handler should typically be bound to an element high up in the DOM tree, such as <body>.

The following example shows a way to accomplish it.. 


<html>
<head>
<style>
div { width:250px; height:200px; margin: 10px 20px 10px 10px;
background:pink; border:2px groove; float:right; }
p { margin:0; margin-left:10px; color:red; width:220px;
height:120px; padding-top:70px;
float:left; font-size:14px; }
span { display:block; }
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
</head>
<body>
<p>
<span>Hover the mouse on the right hand block</span>
<span> </span>
</p>
<div></div>
<script>
$("div").mousemove(function(e){
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
$("span:first").text("( e.pageX, e.pageY ) : " + pageCoords);
$("span:last").text("( e.clientX, e.clientY ) : " + clientCoords);
});
</script>
</body>
</html>


You may like to try this example here.