Menu ▼



Posted By :
avatarmrkraju
Total Views : 1062

jQuery hover event example to change the div background color in mouse over

This example will shows you how to change the div background color using jquery hover event. we have to write two functions first function will fire when mouse pointer/cursor move on to a div and the second function will fire when cursor moved out from the div.

$(document).ready(function () {
    $("#divhover").hover(function () {
        $(this).css("background", "blue");
    },
        function () {
            $(this).css("background", "orange");
        });
});

Example:
Place the cursor here to see the hover effect using jQuery.

Source Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="Stylesheet"
        type="text/css" />
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script language="javascript">
        $(document).ready(function () {
            $("#divhover").hover(function () {
                $(this).css("background", "blue");
            },
        function () {
            $(this).css("background", "orange");
        });
        });
    </script>
</head>
<body>
    <div id="divhover" style="height: 100px; width: 200px; cursor: pointer; background: orange;
        padding: 20px; font-size: 20px; color: #fff;">
        Place the cursor here to see the hover effect using jQuery.
    </div>
</body>
</html>





comments powered by Disqus


Search dotnetlearners.com