jQuery |悬停（）与示例

介绍

悬停（hover）是指当鼠标光标移到一个 HTML 元素上时，该元素的样式发生变化的效果。在 jQuery 中，我们可以使用 .hover() 方法来为页面元素添加悬停事件，从而实现所需的效果。

语法

$(selector).hover(inFunction,outFunction)

• selector：用于选择所需元素的选择器
• inFunction：当鼠标移动到选择器匹配的元素上时所要执行的函数
• outFunction：当鼠标移出选择器匹配的元素时所要执行的函数

示例

在以下的示例中，我们先通过 CSS 来定义悬停时的样式。选定类名为 box 的元素，当鼠标悬停时背景颜色会变成绿色。

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: gray;
    transition: all 0.3s ease-in-out;
  }
  .box:hover {
    background-color: green;
  }
</style>

<div class="box"></div>

接下来，我们使用 jQuery 来实现相同的效果。与使用 CSS 不同的是，我们可以利用 .hover() 方法来实现悬停效果，而不必在 CSS 中定义悬停的样式。

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: gray;
  }
</style>

<div class="box"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $('.box').hover(
    function() {
      $(this).css('background-color', 'green');
    },
    function() {
      $(this).css('background-color', 'gray');
    }
  );
</script>

在上面的代码中，我们调用 .hover() 方法来添加悬停事件。当鼠标进入元素时，function()内的代码将被执行，因此元素的背景颜色将变为绿色。当鼠标移出时，第二个参数的 function() 会被执行，将背景色改回灰色。

值得注意的是，当使用 .hover() 方法时，我们可以把两个参数写在一个函数中，用逗号隔开。例如：

$('.box').hover(function() {
  $(this).css('background-color', 'green');
}, function() {
  $(this).css('background-color', 'gray');
});

结论

悬停（hover）是在 WEB 开发中经常需要的效果之一，使用 jQuery 中的 .hover() 方法可以为页面中的元素添加悬停事件，从而实现各种丰富的交互体验。同时，我们也可以结合 CSS 来实现同样的效果，具体应该根据实际情况来考虑采用哪种方法。