请教两个独立div鼠标悬浮切换显示隐藏的问题

Question

独立是说两个div不是子父元素关系的，鼠标悬浮到div1时，div2会显示，div1和div2紧挨着，鼠标移出div1，如果进入div2时不隐藏，如果均不在两个div内时，div2隐藏。之前听说用setTimeout，基础不好，搞了半天没弄好，有没有高手指点下，最好是现成代码。
html结构比如是这样的：
<div style="width:100px; height:100px; background:#CCC;"></div>
<div style="width:150px; height:150px; background:#F90;"></div>

Answer 1

<div style="width:100px; height:100px; background:#CCC;" id="test1"></div>
<div style="width:150px; height:150px; background:#F90;display:none;" id="test2"></div>
<script  type="text/javascript">
function bindMouse(){
    var _hidediv2;
    var _o1=document.getElementById("test1");
    var _o2=document.getElementById("test2");
    _o1.onmousemove=function(){
        _o2.style.display="block";
    };
    _o1.onmouseout=function(){
        _hidediv2=setTimeout(function(){_o2.style.display="none";},500);
    };
    _o2.onmousemove=function(){
        clearTimeout(_hidediv2);
        this.style.display="block";
    };
    _o2.onmouseout=function(){
        this.style.display="none";
    }
}
bindMouse();
</script>

Answer 2

谢谢你的回复我试了下的确可以，但在我的项目里不知道就不行，请问用jquery框架的hover里定义两个事件是不是一样的？能不能帮我看看我这个是什么问题<div style="width:100px; height:100px; background:#CCC; " id="test1" class="ulist"></div>
<div style="width:150px; height:150px; background:#F90; display:none;" id="test2" class="containerDiv"></div>
<script type="text/javascript">
//显示函数
ulistShowFun = function(hoverobj,showobj){
//定位
var hoverid = hoverobj.attr("attr");
var X = hoverobj.offset().left;
//alert(X);
var Y = hoverobj.offset().top + hoverobj.outerHeight();
//目标id
var anchorid = null;
var tar = null;
showobj.each(function(){
anchorid = $(this).attr("attr");
if(anchorid == hoverid){

//$(this).css({"left":X,"top":Y}).fadeIn("fast");
$(this).css({"left":X,"top":Y});
tar = $(this);
}
});
//每次都是计算页面位置返回对象
return tar;
}
var st;
$(".containerDiv").hover(function(){
clearTimeout(st);
toggleone.fadeIn("fast");
},
function(){
toggleone.fadeOut("fast");
});

$(".ulist").hover(function(){
toggleone = ulistShowFun($(this),$(".containerDiv"));
//显示返回对象
toggleone.fadeIn("fast");
},
function(){
st = setTimeout(function(){
toggleone.fadeOut("fast");
},500);
});
</script>

Answer 3

就你的方法，按那样子写，在我本地测试也是可以用的
我本地测试的jquery库是：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

Answer 4

我那个方法你使用jquery的话，是可以使用hover来代替的hover(in)就相当于onmouseover了,hover(out)就相当于onmouseout了，你那代码在我本地测试OK。就是保证你的那两个div在js脚本之前

Answer 5

基本解决了，谢谢您，但还有个小问题，就是之前我就不大理解需要在哪些地方放cleartimeout。刚是因为我div有很多组。div1上多加了一个cleartimeout就行了，但我不大理解为什么，只知道clear是清除延迟，但什么时候需要清除延迟呢

Answer 6

基本解决了，谢谢您，但还有个小问题，就是之前我就不大理解需要在哪些地方放cleartimeout。刚是因为我div有很多组。div1上多加了一个cleartimeout就行了，但我不大理解为什么，只知道clear是清除延迟，但什么时候需要清除延迟呢

Answer 7

又验证了下还是有问题，似乎两个独立div不需要settimeout方法也能实现，1.去掉您二楼回复中的延迟，还能实现，2.用改写style的方式和用jquery的show，hide方法效果相同，而用fadeIn和fadeOut方法和延迟会有点冲突，这个应该和框架实现有关吧。
而第一个问题还是不能理解，为什么不要延迟还是能实现，不会先隐藏吗