The Mouse Hover
event can be handled by adding an event handler to the hover() event using jQuery as follows. The event fires when the mouse cursor
hovers over the target region or Object.
$("#TargetObject").hover(function(event) {
// Add code here
to handle the Event
});
The below example shows on how to Handle the Mouse event in a DIV
The below example shows on how to Handle the Mouse event in a DIV
Example
Create a new HTML/ASPX page
Copy the below code.
Change the mapping of the jQuery file jquery-1.7.2.js to map to your local drive.
View the page in your browser to test the Mouse Event
<html xmlns="http://www.w3.org/1999/xhtml">
Create a new HTML/ASPX page
Copy the below code.
Change the mapping of the jQuery file jquery-1.7.2.js to map to your local drive.
View the page in your browser to test the Mouse Event
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Mouse
Events</title>
<script type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
src="JavaScript/jquery-1.7.2.js"></script>
<script language="javascript"
type="text/javascript">
type="text/javascript">
$(document).ready(function() {
//
// Mouse
Hover Event
$("#divMouseButton").hover(function(event) {
$("#spanMouseButton").text('Mouse Hover Event');
});
});
</script>
</head>
<body>
<form id="frmMouseEvents" runat="server">
<table cellpadding="2" cellspacing="2" border="1">
<tr valign="top">
<td align="center">
<div id="divMouseButton"
style="width:100px;
height:75px;
background-color:#FCF4EB;
border:1px double #E3B999;">
</div>
</td>
<td align="center">
<span
id="spanMouseButton"
style=" font-family:Verdana;
font-size:12px; color:Maroon;">
Click to Check Button
Click Event
</span>
</td>
</tr>
</table>
</form>
</body>
</html>
Related Post
jQuery Mouse Events Tutorial
jQuery Mouse Toggle Event
jQuery MouseMove Event capture Mouse Position
jQuery Mouse Right Button Click Event
jQuery Mouse Middle Button Click Event
jQuery Mouse Left Button Click Event
jQuery Mouse Hover Event
jQuery Mouse Leave Event
jQuery Mouse Enter Event
jQuery Mouse Over Event
jQuery Mouse Up Event
jQuery Mouse Down Event
jQuery Mouse Double Click Event
jQuery Mouse Click Event
jQuery Mouse Events Tutorial
jQuery Mouse Toggle Event
jQuery MouseMove Event capture Mouse Position
jQuery Mouse Right Button Click Event
jQuery Mouse Middle Button Click Event
jQuery Mouse Left Button Click Event
jQuery Mouse Hover Event
jQuery Mouse Leave Event
jQuery Mouse Enter Event
jQuery Mouse Over Event
jQuery Mouse Up Event
jQuery Mouse Down Event
jQuery Mouse Double Click Event
jQuery Mouse Click Event
No comments:
Post a Comment