jQuery mouseout() 方法指的是鼠标从所选择的元素上面离开的时候发生的事件方法，该事件一般与mouseover()事件配合使用。

mouseout 和 mouseleave 的区别：

mouseleave 事件仅在鼠标指针离开所选元素时触发，而 mouseout 事件在鼠标光标离开任何子元素以及所选元素时触发。

语法

$(selector).mouseout(function)

参数

参数说明
function是可选参数。当 mouseout 事件被触发时，执行的方法。

例子 

例1

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
    $("p").mouseover(function(){
        $("p").css("background-color", "lightgreen");
    });
    $("p").mouseout(function(){
        $("p").css("background-color", "orange");
      });
});
</script>
</head>
<body>
<p>将光标移到这里看看效果。</p>
</body>
</html>

例2

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>mouseover 例子</title>
  <style>
  div.out {
    width: 40%;
    height: 120px;
    margin: 0 15px;
    background-color: lightgreen;
  }
  div.in {
    width: 60%;
    height: 60%;
    background-color: red;
    margin: 10px auto;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 <div class="out">
  <span style="padding:20px">移动你的鼠标</span>
  <div class="in"></div>
</div>
<script>
$("div.out").mouseover(function() {
    $(this).find( "span" ).text("鼠标悬停");
  })
  .mouseout(function(){
    $(this).find("span").text("鼠标离开");
  });
</script>
</body>

</html>