如何使用 jQuery 在鼠标悬浮时为背景颜色添加动画变化?


要更改背景颜色,请使用 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://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>

更新于: 2020 年 6 月 22 日

699 次浏览

开启你的 职业生涯

通过完成课程来获得认证

立即开始
广告