js鼠标悬停在a标签显示div,移走鼠标div消失，鼠标悬停在div上时div不消失

最新推荐文章于 2025-06-13 14:41:51 发布

江湖有缘再见

最新推荐文章于 2025-06-13 14:41:51 发布

阅读量2.2w

点赞数 13

文章标签：鼠标悬停 js鼠标悬停鼠标滑过隐藏显示div

本文介绍了一段JavaScript代码，该代码实现了一个功能，即当鼠标悬停在特定的a标签上时，会显示或隐藏一个div元素。一旦div元素显示出来，即使鼠标移开a标签但仍然停留在div上时，div也不会消失，从而允许用户在div内进行进一步的交互。

把鼠标悬浮在标签a标签上时，出现或隐藏div，当div出现之后，将鼠标移到div上的时候，div不消失鼠标还可以继续操作其他功能的代码如下：

<a id="login-btn">按钮</a>
<div id="login-box" style="display:none;">默认隐藏的div</div>
<script>
(function(){
  var btn = document.getElementById('login-btn');
  var box = document.getElementById('login-box');
  var timer = null; 
  box.onmouseover = btn.onmouseover = function(){
    if(timer) clearTimeout(timer)
      box.style.display = 'block';
  }
  box.onmouseout = btn.onmouseout = function(){
    timer = setTimeout(function(){
      box.style.display = 'none';
    },400);

  }
})();
</script>

说明：
把login-btn和login-box换成你自己的id名就可以了，注意，div默认是隐藏的。

来源于@秦兽兽博客