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

秦兽兽 2018-10-12 AM 209次 0条

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

把login-btn和login-box换成你自己的id名就可以了,注意,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>

最后修改:2018年10月12日 04:22 AM

标签: js / 鼠标悬停

// ~~ * 不知道有没有人请我敷个面膜 * ~~//

非特殊说明,本博所有文章均为博主原创。

秦兽兽的头像
秦兽兽 博主大人
我想我可以的,对,我可以的。

评论啦~