Teach with us

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

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>
Updated on 22-Jun-2020 08:41:49

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements