Change Background Color Of The Panel Using Mouse Hover Event

<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>
            &nbsp;&nbsp;<input id="btnSubmit" type="button" value="Submit"/>
            <input id="btnCancel" type="button" value="Cancel"/>
        </div>
    </body>
</html>
Ebook Download
View all
Learn
View all