mouseover显示层mouseout隐藏层，并且在鼠标放上层时显示层【原】

　　昨天晚上同学有个项目需求要实现在鼠标放上链接后显示层，离开后隐藏层，麻烦的是当鼠标放上层后，这个层会一直显示，离开这个层再次隐藏，今天中午趁着上班时间还没到，简单的测试了一下，成功了，具体原理就不细说了，请看源码：

JS-Code

<body>
    <a href="javascript:voie(0)" id="atest" onmouseover="a_onmouseover()">鼠标放上测试</a>
    <div id="divTest" style="display: none; background: red; width: 100px">
        我显示出来啦！！！
    </div>

        var timer;
        function a_onmouseover()
        {
            var ddv = document.getElementById("divTest");
            var atest = document.getElementById("atest");
            ddv.style.display="block";
            ddv.onmouseover=function(){
                clearTimeout(timer);
                ddv.onmouseout=function(){
                    this.style.display="none";
                }
            }
            atest.onmouseout=function(){Mout()}
        }

        function Mout()
        {
            timer = setTimeout(function(){document.getElementById("divTest").style.display="none";},100);
        }

</script>

</body>

posted on 2009-12-11 13:33 ToKens 阅读(1403) 评论(0) 编辑收藏举报