关于jquery的hover事件,该如何解决
日期：2014-05-16 浏览次数：20568 次
关于jquery的hover事件
我是个jquery新手，遇到一个有意思的问题：我定义了两个div，div1显示，div2原本隐藏，鼠标浮上div1，div2显示。当鼠标移出div1+div2（同时不在两块div中）时，div2隐藏。
开始一直想怎么才能在div1中hover（out）事件发生时调用方法来判断鼠标是否在div2中，一个前辈来指点，只在div2中定义相同的（in，out）事件就可以，不会出现鼠标移出div1，进入div2由于先执行隐藏而div2进入事件无法执行。
现在猜想可能和hover事件定义有关，移出div1隐藏div2方法有个延迟，时间差。有没有高手能解释下原理。
------解决方案--------------------
我是个jquery新手，遇到一个有意思的问题：我定义了两个div，div1显示，div2原本隐藏，鼠标浮上div1，div2显示。当鼠标移出div1+div2（同时不在两块div中）时，div2隐藏。
开始一直想怎么才能在div1中hover（out）事件发生时调用方法来判断鼠标是否在div2中，一个前辈来指点，只在div2中定义相同的（in，out）事件就可以，不会出现鼠标移出div1，进入div2由于先执行隐藏而div2进入事件无法执行。
现在猜想可能和hover事件定义有关，移出div1隐藏div2方法有个延迟，时间差。有没有高手能解释下原理。
------解决方案--------------------
- HTML code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style>
#div1{width:100px;height:100px;border:1px solid black;display:block;}
#div2{width:100px;height:100px;border:1px solid black;display:none;}
</style>
</head>
<body>
<div id='div1'></div>
<div id='div2'></div>
<script src="jquery.js"></script>
<script>
(function(){
var $div1 = $("#div1"), $div2 = $("#div2");
$div1.hover(function(e){
$div2.show();
}, function(e){
console.log(isOrContains($div2, e.relatedTarget));
if(!isOrContains($div2, e.relatedTarget)){
$div2.hide();
}
});
$div2.bind("mouseleave", function(e){
console.log(isOrContains($div1, e.relatedTarget));
if(!isOrContains($div1, e.relatedTarget)){
$(this).hide();
}
});
function isOrContains(elem1, elem2){
var $elem1 = elem1.jQuery ? elem1 : $(elem1),
$elem2 = elem2.jQuery ? elem2 : $(elem2);
return ($elem1.is($elem2) || $elem1.has($elem2).length !== 0) ? true : false;
}
})();
</script>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
