How to change the background color using jQuery?

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. 


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

Live Demo

<!DOCTYPE html>
<script src=""></script>
        mouseenter: function(){
            $(this).css("background-color", "gray");
        mouseleave: function(){
            $(this).css("background-color", "red");
        dblclick: function(){
            $(this).css("background-color", "yellow");

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