您的位置：首页 > Web前端 > JQuery

jquery mouseover与mouseenter区别

2014-05-04 15:58 141 查看

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="../Packages/jQuery.1.8.3/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
x = 0;
y = 0;
$(document).ready(function () {
$("div.over").mouseover(function () {
$(".over span").text(x += 1);
});
$("div.enter").mouseenter(function () {
$(".enter span").text(y += 1);
});
});
</script>
</head>
<body>
<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
<div class="over" style="background-color: lightgray; padding: 20px; width: 40%; float: left">
<h2 style="background-color: white;">被触发的 Mouseover 事件：<span></span></h2>
</div>
<div class="enter" style="background-color: lightgray; padding: 20px; width: 40%; float: right">
<h2 style="background-color: white;">被触发的 Mouseenter 事件：<span></span></h2>
</div>
</body>
</html>

mouseleave与mouseout与之对应。

jquery中可用hover替换以上操作

x = 0;
y = 0;
$(document).ready(function () {
$("div.over").hover(
function () { $(".over span").text(x += 1); },
function () {$(".enter span").text(y += 1);}
)
});

　　

hover(enter,leave)模拟光标悬停事件,光标移到元素上触发enter，移除触发leave

hover(enter,leave)是用于替换bind("mouseenter")和bind("mouseleave"),不是用于替换bind("mouseover")和bind("mouseout")

转载：http://blog.csdn.net/ocean1010/article/details/7394599

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航