如何使用 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-06-22

699 次瀏覽

開啟你的 事業

完成課程獲得認證

入門
廣告