如何在鼠标悬停时使用jQuery动画化背景颜色的变化？

Z时代
2024-01-10
分类：综合

若要更改背景颜色，请使用mouseenter事件。放置鼠标光标时背景色发生变化：

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

鼠标光标放在以下元素上：

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

您可以尝试运行以下代码，以了解如何为鼠标悬停时的背景色变化设置动画：

示例

<!DOCTYPE html>
<html>
<head>
   <script src="https://cdn.staticfile.org/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>