jQuery mouseleave() 方法 指的是鼠标离开元素时执行的事件方法。该事件一般与 mouseenter() 事件一起使用。

语法

$(selector).mouseleave(function)

参数

参数说明
function是可选参数。当 mouseleave 事件被触发时执行的函数。

例子

例1

一个简单的例子：

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("#h1").mouseleave(function(){  
       $( "div" ).text( "鼠标离开执行的内容" ).show().fadeOut( 2000 ); 
    });  
});  
</script>  
</head>  
<body>
<h1 id="h1">鼠标放上去再离开看下效果。</h1>
<div></div>
</body>  
</html>
例2

修改背景色的例子

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
    $("p").mouseenter(function(){
        $("p").css("background-color", "red");
    });
    $("p").mouseleave(function(){
        $("p").css("background-color", "blue");
    });
});
</script>
</head>
<body>
<p>将鼠标光标移到这里。</p>
</body>

</html>