How to animate a change in background color using jQuery on mouseover?

jQuery Web Development Front End Technology

To change background color, use the mouseenter event. The background color change when you place mouse cursor:

mouseenter: function(){
   $(this).css("background-color", "gray");
}

The mouse cursor is placed on the following element:

<p class="my">Click and move the mouse pointer to change the background color.</p>

You can try to run the following code to learn how to animate a change in background color on mouseover:

Example

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");
            },
   
         });
      });
   </script>
</head>
<body>

   <p class="my">Click and move the mouse pointer to change the background color.</p>

</body>
</html>

Kristi Castro

Updated on: 22-Jun-2020

569 Views

Kickstart Your Career

Get certified by completing the course

Get Started