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

请教两个独立div鼠标悬浮切换显示隐藏的问题
独立是说两个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>

------解决方案--------------------

HTML code

<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>

------解决方案--------------------

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

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

相关推荐