全兼容系列（3）-------------------鼠标滑过

最新推荐文章于 2025-12-08 14:26:17 发布

原创最新推荐文章于 2025-12-08 14:26:17 发布 · 379 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

html+css+js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用JavaScript和CSS实现的鼠标悬停显示隐藏DIV的方法。通过设置不同的定时器，确保了当鼠标悬停在指定元素上时，能够平滑地显示或隐藏对应的DIV。同时，该方法还考虑到了鼠标快速移动时可能产生的视觉效果问题。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{ width:150px; height:300px; background:#ccc; display: none;}
</style>
<script>
//时刻关注现在执行的是哪个定时器
  window.onload=function(){
    var oA=document.getElementById('A1');
    var oDiv=document.getElementById('div1');
    var timer=null;//父函数的变量子函数同样可以用
    oA.onmouseover=function()
    {
      clearTimeout(timer);//再次循环时关闭前一个定时器，阻止div1s后消失
      timer=setTimeout(function(){
        oDiv.style.display='block';
      },300);//当鼠标在按钮上停留300毫秒后div显示
    };
    oA.onmouseleave=function()
    {
      clearTimeout(timer);//若鼠标只是滑过按钮则关闭上一个定时器300毫秒后让div不显示
      timer=setTimeout(function(){
        oDiv.style.display='none';
      },3000);//若div正常显示则让它3s后消失
    };
    oDiv.onmouseenter=function(){
      clearTimeout(timer);//若鼠标悬停在div上则关闭上一个定时器让div一直显示
    };
    oDiv.onmouseleave=function(){
      timer=setTimeout(function(){
        oDiv.style.display='none'
      },1000);//若鼠标离开div则让div在1s后消失
    }


  }
</script>
</head>
<body>
  <a href="javerscript:;" id="A1">菜单</a>
  <div id="div1">

  </div>
</body>
</html>