关于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方法有个延迟，时间差。有没有高手能解释下原理。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

为什么要纠结于2个分开的DIV，你拿一个大DIV把2个套起来，然后操作最外层的DIV~~~ 这样，还有什么问题么？
http://jsfiddle.net/3Sqke/1/
有什么问题？
http://jsfiddle.net/3Sqke/6/
是这个地址
谢谢，这种方法也能实现，而且更好。但我遇到了一个小问题，就是ie8以下的浏览器会有个小bug，如果div2运用滤镜的话，div2会丢失焦点，网上也有人遇到这个问题，说解决的方法是分开写。当然不用考虑那么多的话还是你的方法最直接。
哇这个东东第一次见，真的比dw好用啊，收藏了。
单位的前辈也是这么做的，就是不理解为什么div2事件还能发生，如果先隐藏的话，就不会发生鼠标移入div
2的事件才对吧？第一次在论坛里发帖就犯2了，发了一次显示404，还以为没有发成功，就有发了一次
<!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){
if($div2.has(e.relatedTarget)){
$div2.hide();
}
});
$div2.mouseLeave(function(e){
if($div1.has(e.relatedTarget)){
$(this).hide();
}
});
});
</script>
    </body>
</html>
<!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){
                    if($div2.has(e.relatedTarget)){
                        $div2.hide();
                    }
                });
                $div2.mouseLeave(function(e){
                    if($div1.has(e.relatedTarget)){
                        $(this).hide();
                    }
                });
            })();
        </script>
    </body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>新闻滚动</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#div1").hover(function(){
$("#div2").slideDown("fast");
},function(){
$("#div2").slideUp("fast");
});
})
</script>
<style type="text/css">
#div1{ position:relative; width:200px; height:50px;background:yellow;}
#div2{width:150px; height:100px;background:red; position:absolute; top:50px; display:none}
</style>
</head>
<body><div id="div1">div1
<div id="div2">div2</div>
</div>
</body>
</html>
<!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>