Jquery mouseover()和mouseenter的区别(转自w3school)
2012-12-28 21:08
363 查看
// x=0;
y=0;
$(document).ready(function(){
$("div.over").mouseover(function(){
$(".over span").text(x+=1);
alert("div");
});
$("div.over h2").mouseover(function(){
$(".over span").text(x+=1);
alert("a")
});
$("div.enter").mouseenter(function(){
$(".enter span").text(y+=1);
});
$("div.enter h2").mouseenter(function(){
$(".enter span").text(y+=1);
});
});
// ]]>
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
y=0;
$(document).ready(function(){
$("div.over").mouseover(function(){
$(".over span").text(x+=1);
alert("div");
});
$("div.over h2").mouseover(function(){
$(".over span").text(x+=1);
alert("a")
});
$("div.enter").mouseenter(function(){
$(".enter span").text(y+=1);
});
$("div.enter h2").mouseenter(function(){
$(".enter span").text(y+=1);
});
});
// ]]>
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> x=0; y=0; $(document).ready(function(){ $("div.over").mouseover(function(){ $(".over span").text(x+=1); alert("div"); }); $("div.over h2").mouseover(function(){ $(".over span").text(x+=1); alert("a") }); $("div.enter").mouseenter(function(){ $(".enter span").text(y+=1); }); $("div.enter h2").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>
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
被触发的 Mouseover 事件:
被触发的 Mouseenter 事件:
相关文章推荐
- JQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jQuery mouseover与mouseenter的区别
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jquery的hover mouseover mouseout mouseenter mouseleave的区别
- jquery的mouseover/mouseleave和mouseenter/mouseout区别,横向多级滑动菜单
- jquery mouseover和hover的区别
- 前端面试题之mouseover和mouseenter的区别
- jquery 中 mouseenter 与 mouseover 的区别
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jQuery 事件 keypress click mouseover blur load
- jQuery之mouseover与mouseenter以及mouseout与mouseleave的区别
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jquery mouseover(fn()) mouseout(fn()) hover(fn(),fn())
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jQuery中hover与mouseover与mouseenter的区别