jquery 之 $().hover(func1, funct2)使用方法

当使用 jQuery 的时候，我们需要掌握一些基础的操作方法和语法。其中 $().hover(func1, func2) 就是一个很常用的方法。这个方法可以在鼠标进入和离开某个元素时执行两个不同的事件处理函数 func1 和 func2。

基本语法

下面是 $().hover() 方法的基本语法格式：

$(selector).hover(function() {
  // 鼠标进入时执行的代码
}, function() {
  // 鼠标离开时执行的代码
});

其中，selector 是要绑定事件的元素选择器，func1 是鼠标进入时要执行的函数，func2 是鼠标离开时要执行的函数。

示例说明

下面我们来看两个使用 $().hover() 方法的示例说明：

示例一

HTML 代码：

<div class="box">
  <p>请将鼠标移到此处</p>
</div>

CSS 代码：

.box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  text-align: center;
  line-height: 200px;
}

JS 代码：

$(document).ready(function(){
  $(".box").hover(function(){
    $(this).css("background-color", "#ffa500");
    $(this).children("p").text("鼠标已进入");
  }, function(){
    $(this).css("background-color", "#f0f0f0");
    $(this).children("p").text("请将鼠标移到此处");
  });
});

当我们将鼠标移到 box 容器的上方时，容器的背景色变为橙色，同时显示文字“鼠标已进入”；当鼠标离开容器时，背景色恢复为灰色，文字显示“请将鼠标移到此处”。

示例二

HTML 代码：

<form>
  <p>用户名：</p>
  <input type="text" name="username" id="username">
  <p>密码：</p>
  <input type="password" name="password" id="password">
  <p><button type="submit">提交</button></p>
</form>

JS 代码：

$(document).ready(function(){
  $("input").hover(function(){
    $(this).css("border", "2px solid #ffa500");
  }, function(){
    $(this).css("border", "1px solid #ccc");
  });
});

当我们将鼠标移到输入框上方时，输入框的边框会变粗，并变为橙色；当鼠标离开输入框时，边框恢复为原来的灰色。