jQuery mouseover() 方法指的是鼠标光标放到元素上执行的事件方法。此事件一般与 mouseout() 事件配合使用。

mouseenter() 和 mouseover() 的区别

mouseenter 事件仅在鼠标指针进入所选元素时触发，而 mouseover 事件在鼠标光标进入任何子元素以及所选元素时触发。

语法

参数

$(selector).mouseover(function)
参数说明
function是可选参数。当鼠标悬停事件触发时，执行的函数。

例子

例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>