jquery中mouseenter，mouseleave与hover的区别用法

66 阅读 0 评论 44 点赞

我是靠谱客的博主要减肥奇异果，最近开发中收集的这篇文章主要介绍jquery中mouseenter，mouseleave与hover的区别用法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

hover：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../js/jquery-1.9.0.min.js" ></script>
<script>
$(document).ready(function(){
$(".div1").hover(function(){
alert("您的鼠标悬停在此div上！");
},
function(){
alert("您的鼠标已离开此div！");
}
);
})
</script>
<title>jqueryhover</title>
</head>
<body>
<div class="div1" style="width: 200px;height: 200px;background-color: red;">
</div>
</body>
</html>

hover前一个函数为悬停触发函数，后一个函数为鼠标离开所触发的函数；

mouseenter,mouseleave:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../js/jquery-1.9.0.min.js" ></script>
<script>
$(document).ready(function(){
$("div").addClass("div1");
$("#p1").mouseenter(function(){
alert("您把鼠标放在了此元素上！");
});
$("#p1").mouseleave(function(){
alert("您把鼠标移离了此元素！")
})
})
</script>
<title>mouseenter</title>
</head>
<style>
.div1{
background-color: red;
width: 200px;
height: 200px;
}
</style>
<body>
<div id="p1">
</div>
</body>
</html>