下面我就为大家分享一篇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('p2'); p2.innerHTML="鼠标请移开!"; var timer=null; p1.onmouseover= function(){ clearTimeout(timer); p2.style.display='block'; }; p1.onmouseout= function(){ clearTimeout(timer); timer= setTimeout(function(){ p2.style.display='none'; }, 700); }; p2.onmouseover=function(){ clearTimeout(timer); }; p2.onmouseout=function(){ clearTimeout(timer); timer=setTimeout(function(){p2.style.display='none';},700); } } </script> </head> <body> <p id="p1"></p> <p id="p2"></p> </body> </html>
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
以上就是通过JS如何实现延迟隐藏功能的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号