Rumah > Artikel > hujung hadapan web > 通过JS如何实现延迟隐藏功能

通过JS如何实现延迟隐藏功能

亚连asal: 2018-06-14 16:42:311651semak imbas

下面我就为大家分享一篇JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)，具有很好的参考价值，希望对大家有所帮助。

JS实现延迟隐藏

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>延迟隐藏</title>
 <style>
 #p1{
  width:100px;
  height:100px;
  background:yellow; 
  border: 5px solid #999;
  border-radius: 10px;
  position: absolute;
  right: 50px;
  text-align: center;
  line-height: 100px;
  margin-bottom:10px;
 }
 #p2{
  width:200px;
  float: left;
  height:200px;
  border: 5px solid #999;
  border-radius: 10px;
  position: absolute;
  right:160px;
  text-align: center;
  line-height: 200px;
  background:green;
  display:none;
 }
</style>

<script>
 window.onload=function(){
  var p1=document.getElementById("p1");
   p1.innerHTML="鼠标请放上！";
  var p2=document.getElementById(&#39;p2&#39;);
   p2.innerHTML="鼠标请移开！";
  var timer=null;
  p1.onmouseover= function(){  
    clearTimeout(timer);
    p2.style.display=&#39;block&#39;;
  };
   p1.onmouseout= function(){
   clearTimeout(timer);
    timer= setTimeout(function(){
      p2.style.display=&#39;none&#39;;
    }, 700);
  };
  p2.onmouseover=function(){
   clearTimeout(timer);
  };
  p2.onmouseout=function(){
   clearTimeout(timer);
    timer=setTimeout(function(){p2.style.display=&#39;none&#39;;},700);   
  }
 }
</script>
</head>
<body>
<p id="p1"></p>
<p id="p2"></p>
 
</body>
</html>

上面是我整理给大家的，希望今后会对大家有帮助。

详细解读Angular有关报错404问题

在微信小程序中如何使用slider组件

在vue中如何实现记住密码到cookie上

Atas ialah kandungan terperinci 通过JS如何实现延迟隐藏功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

angular Cookie JS 微信小程序

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：在JavaScript中如何判断变量名是否存在数组中Artikel seterusnya：使用Angular如何实现定时器功能

Artikel berkaitan

Lihat lagi