<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.js"> </script>
<script type="text/javascript">
//Start the main function of jquery
$(document).ready(function ()
{
//Start th hover function event for the "myloginpanel"...
$("#myloginpanel").hover(function ()
{
//When mouse hover event will fire it will background color of "muloginpanle" as "lightgreen"...
$("#myloginpanel").css("background-color", "lightgreen");
}, function ()
{
//When mouse will be outside of the "myloginpanel" it will display background color as "red"...
$("#myloginpanel").css("background-color", "red");
});
});
</script>
</head>
<body>
<h1>JQuery Mouse Hover Event Demo </h1>
<div id="myloginpanel" style="background-color:red;width:250px;height:100px">
Username : <input type="text" id="txtusername" width="150px"><br>
Password : <input type="text" id="txtpassword" width="150px"><br>
<input id="btnSubmit" type="button" value="Submit"/>
<input id="btnCancel" type="button" value="Cancel"/>
</div>
</body>
</html>