How to change the background color using jQuery?

jQueryWeb DevelopmentFront End Technology

To change the background color using jQuery, use the jQuery css() property. We will change background color on mouse hover with the jQuery on() and css() method. 

Example

You can try to run the following code to learn how to change background color using jQuery:

Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("body").on({
        mouseenter: function(){
            $(this).css("background-color", "gray");
        },  
       
        mouseleave: function(){
            $(this).css("background-color", "red");
        },
       
        dblclick: function(){
            $(this).css("background-color", "yellow");
        }
    });
});
</script>
</head>
<body>

<p>Double click and move the mouse pointer to change the background color.</p>

</body>
</html>
raja
Published on 20-Dec-2017 10:31:28
Advertisements