jQuery | mouseout() 示例

简介

mouseout()是jQuery提供的一个鼠标事件，当鼠标从某个元素上移开时触发。可以用来实现鼠标悬停效果的撤销、提示框的隐藏等。

语法

$(selector).mouseout(function)

参数说明：

• function是当鼠标从元素上移开时，要执行的函数。

示例

HTML代码：

<div id="box" style="background-color: #ccc; width: 200px; height: 200px;">
  <p>鼠标移入此处！</p>
</div>

jQuery代码：

$(document).ready(function(){
  $("#box").mouseout(function(){
    $(this).css("background-color", "#ccc");
  });
  $("#box").mouseover(function(){
    $(this).css("background-color", "#f00");
  });
});

效果：

鼠标移入box区域，背景色变为红色；鼠标移出box区域，背景色恢复为灰色。

注意事项

• 鼠标mouseout事件与mouseleave事件有区别，mouseleave()只有当鼠标完全离开元素时才会触发，而mouseout()则是当鼠标从元素上任意一部分离开时触发。
• 鼠标经过子元素时，可能会触发多次mouseout()事件，因此在代码编写时需要注意考虑这种情况。

以上就是mouseout()的介绍和示例，希望能对大家有所帮助。