# .hover()

所属分类：事件 > 鼠标事件 英文文档：.hover()
将二个事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行。

## .hover( handlerIn(eventObject), handlerOut(eventObject) )返回: jQuery

描述: 将二个事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行。

- #### 添加的版本: 1.0.hover( handlerIn(eventObject), handlerOut(eventObject) )

  - handlerIn(eventObject)
    类型: Function()
    当鼠标指针进入元素时触发执行的事件函数
  - handlerOut(eventObject)
    类型: Function()
    当鼠标指针离开元素时触发执行的事件函数

`.hover()`方法是同时绑定 `mouseenter`和 `mouseleave`事件。我们可以用它来简单地应用在 鼠标在元素上行为。

调用`$(selector).hover(handlerIn, handlerOut)`是以下写法的简写：

1 |
    $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

更多细节参见`.mouseenter()` 和 `.mouseleave()`。

## 例子:

#### Example: 当鼠标在列表中来回滑动的时候添加特殊的样式， try:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
    <!DOCTYPE html><html><head>  <style>  ul { margin-left:20px; color:blue; }  li { cursor:default; }  span { color:red; }</style>  <script src="https://code.jquery.com/jquery-latest.js"></script></head><body>  <ul>    <li>Milk</li>    <li>Bread</li>    <li class='fade'>Chips</li>     <li class='fade'>Socks</li>  </ul><script>$("li").hover(  function () {    $(this).append($("<span> ***</span>"));  },  function () {    $(this).find("span:last").remove();  }); //li with fade class$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);}); </script> </body></html>

#### Demo:

#### Example: 当鼠标在表格单元格中来回滑动的时候添加特殊的样式， try:

1 2 3 4 5 6 7 8 |
    $("td").hover(  function () {    $(this).addClass("hover");  },  function () {    $(this).removeClass("hover");  });

#### Example: 解除绑定上面的例子中使用:

1 |
    $("td").unbind('mouseenter mouseleave');

## .hover( handlerInOut(eventObject) )返回: jQuery

描述: 将一个单独事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行。

- #### 添加的版本: 1.4.hover( handlerInOut(eventObject) )

  - handlerInOut(eventObject)
    类型: Function()
    当鼠标指针进入或离开元素时触发执行的事件函数

当传递给`.hover()` 方法一个单独的函数的时候，将执行同时绑定 `mouseenter`和 `.mouseleave()`事件函数。这允许在处理函数中用户使用jQuery的各种切换方法或 响应处理程序内的不同的`event.type`。

调用`$(selector).hover(handlerInOut)`是以下写法的简写：

1 |
    $(selector).bind("mouseenter mouseleave", handlerInOut);

更多细节参见`.mouseenter()` 和 `.mouseleave()`。

## 例子:

#### 向上或向下滑动显示或隐藏下一个兄弟 LI 节点，并切换样式。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
    <!DOCTYPE html><html><head>  <style>  ul { margin-left:20px; color:blue; }  li { cursor:default; }  li.active { background:black;color:white; }  span { color:red; }  </style>  <script src="https://code.jquery.com/jquery-latest.js"></script></head><body>  <ul>    <li>Milk</li>    <li>White</li>    <li>Carrots</li>    <li>Orange</li>    <li>Broccoli</li>    <li>Green</li>  </ul><script>$("li").filter(":odd").hide() .end().filter(":even").hover(  function () {    $(this).toggleClass("active")      .next().stop(true, true).slideToggle();  });</script> </body></html>

#### Demo: