jQuery事件点击mouseout和mouseleave代码实例

当前位置：首页 > 代码实例 > html5 css3代码分类 > jQuery > jQuery事件点击mouseout和mouseleave代码实例

两个事件功能非常的相像，当鼠标指针离开匹配元素的时候两个事件都能够被触发，貌似功能是一模一样的，但是还是有着巨大的区别，下面通过实例来介绍一下两者的区别。

[ jQuery ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qanduan.com/" />
<title>51前端</title>
<style type="text/css">
div {
  width: 150px;
  height: 150px;
  background-color: green;
  margin-top: 10px;
}
.children {
  width: 80px;
  height: 80px;
  background-color: red;
}
span {
  font-size: 12px;
  color: red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $(".mouseout").mouseout(function () {
    $("span").text("mouseout事件触发了");
  })
  $(".mouseleave").mouseleave(function () {
    $("span").text("mouseleave事件触发了");
  })
});
</script>
</head>
<body>
  <div class="mouseout">
    <div class="children"></div>
  </div>
  <div class="mouseleave">
    <div class="children"></div>
  </div>
  <span></span>
</body>
</html>

代码描述：jQuery事件点击 mouseout mouseleave。jQuery事件点击mouseout和mouseleave代码实例

下载全部收藏

116 154

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册