<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 the function for hover event
$("#btn1").hover(function ()
{
// Give the value of fade to button(value between 0 to 1)
$("#btn1").fadeTo("slow", 0.25);
}, function ()
{
$("#btn1").fadeTo("slow", 1);
});
$("#btn2").hover(function ()
{
$("#btn2").fadeTo("slow", 0.25);
}, function ()
{
$("#btn2").fadeTo("slow", 1);
});
});
</script>
</head>
<body>
<h1>JQuery Mouse Hover Event Demo </h1>
<input id="btn1" type="button" value="Button 1"/><br/><br>
<input id="btn2" type="button" value="Button 2"/><br/><br>
</body>
</html>