jQuery 悬停功能 - Javascript

在网页设计和开发中，悬停效果是很常见的一个交互效果。当鼠标指针悬停在一个元素上时，该元素通常会变色、弹出提示信息或者出现其他变化。在本文中，我们将介绍如何使用 jQuery 实现悬停效果。

步骤 1：引入 jQuery 库

要使用 jQuery，我们需要先在 HTML 页面中引入 jQuery 库。代码如下：

<!-- 引入 jQuery 库 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

此处我们使用了 jQuery 的 CDN，也可以下载 jQuery 库并放置在本地，并在 HTML 页面中引入。

步骤 2：编写 HTML 代码

编写一个 HTML 页面及悬停效果所需要的 HTML 元素。例如，我们可以在页面中添加一个 div 元素，并设置其 class 属性为 hover-effect：

<!-- HTML 代码 -->
<div class="hover-effect">
  <p>当鼠标悬停在此处会出现效果</p>
</div>

步骤 3：编写 jQuery 代码

使用 jQuery 实现悬停效果需要编写交互代码，一般是在文档加载完成后添加 jQuery 代码。

$(document).ready(function(){
  $(".hover-effect").hover(
    function(){
      $(this).css("background-color", "yellow");
    },
    function(){
      $(this).css("background-color", "white");
    });
});

在上述代码中，我们使用了 ready() 方法来确保文档加载完成后再执行交互代码。我们使用了 hover() 方法，当鼠标移入此元素时，该元素背景颜色变为黄色；当鼠标移出该元素时，该元素背景颜色变为白色。

步骤 4：运行代码

完成以上代码后，保存并运行 HTML 页面，当鼠标悬停在 div 元素上时，会出现黄色背景的悬停效果。

以上就是使用 jQuery 实现悬停效果的代码示例。

参考文献：

[1] jQuery - Hover事件 https://www.runoob.com/jquery/event-hover.html