发布时间：2026-09-28 19:07:01 浏览次数：3
在jQuery中，hover()函数是一个非常常用的函数。它可以应用在鼠标悬停和离开事件上，用于在网页中添加鼠标悬停时的动画效果、颜色变化等。
hover()函数的基本语法如下：
$(selector).hover(function(){ // 悬停时执行的代码}, function(){ // 离开时执行的代码});其中，第一个function中包含的是当鼠标悬停在所选元素上时的操作，而第二个function中包含的则是当鼠标离开所选元素时的操作。
下面我们通过一个简单的实例来演示hover()函数的使用：
<!DOCTYPE html><html><head> <title>jQuery.hover()函数详解</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <style> #box { width: 200px; height: 200px; background-color: #ccc; text-align: center; line-height: 200px; font-size: 24px; } </style></head><body> <p id="box">悬停我可以变颜色哦</p> <script> $(document).ready(function(){ $("#box").hover(function(){ $(this).css("background-color","#f00"); },function(){ $(this).css("background-color","#ccc"); }); }); </script></body></html>在这个例子中，我们选取了一个id为box的p元素，当鼠标悬停在这个元素上时，box的背景色会变成红色，当鼠标离开这个元素时，背景色会变回初始的灰色。
在使用hover()函数时需要注意以下几点：
hover()函数是jQuery中常用的事件绑定方法之一，它可以让页面更具动感和友好性。希望通过本篇文章的解释，读者可以掌握hover()函数的使用方法以及它的注意事项。
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流