How to change the background color using jQuery?

jQuery Web Development Front 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>

Amit D

Updated on: 11-Dec-2019

8K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started