📜  如何在 jQuery 中的悬停事件上运行代码?(1)

📅  最后修改于: 2023-12-03 14:52:22.136000             🧑  作者: Mango

如何在 jQuery 中的悬停事件上运行代码?

jQuery 中的悬停事件可以让程序员在鼠标移动到一个元素上时运行特定的代码,这对于创建交互式 Web 应用程序非常有用。下面是一个简单的示例,演示了如何在 jQuery 中使用悬停事件:

$(document).ready(function(){
  $(".hover-element").hover(
    function(){
      // 鼠标移入
      $(this).css("background-color", "red");
    },
    function(){
      // 鼠标移出
      $(this).css("background-color", "green");
    }
  );
});

在这个示例中,我们使用了 .hover() 方法来绑定悬停事件到一个类为 .hover-element 的元素上。当鼠标移入这个元素时,会触发第一个函数,设置其背景颜色为红色;当鼠标移出这个元素时,会触发第二个函数,设置其背景颜色为绿色。

这里是一个更完整的示例,演示了如何在 jQuery 中使用悬停事件来创建一个简单的动画效果:

$(document).ready(function(){
  $(".hover-element").hover(
    function(){
      // 鼠标移入
      $(this).stop().animate({height: "150px", width: "150px"}, "fast");
    },
    function(){
      // 鼠标移出
      $(this).stop().animate({height: "100px", width: "100px"}, "fast");
    }
  );
});

在这个示例中,我们使用了 .animate() 方法来创建一个简单的动画效果,当鼠标移入元素时,它会变大;当鼠标移出元素时,它会变小。

总的来说,jQuery 中的悬停事件非常有用,可以帮助程序员创建出更加交互式的 Web 应用程序。如果您想深入了解 jQuery 中的悬停事件以及其他常用的事件,请参阅 jQuery 官方文档。