Ci-dessous, je vais partager avec vous une méthode JS pour implémenter la fonction de masquage retardé (similaire aux informations d'affichage de la souris de l'avatar QQ), qui a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.
JS implémente le masquage retardé
<!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>
Ce qui précède est ce que j'ai compilé pour tout le monde. j'espère qu'à l'avenir, cela sera utile à tout le monde.
Articles connexes :
Interprétation détaillée des problèmes d'erreur angulaire 404
Comment utiliser le composant slider dans les mini-programmes WeChat
Comment mémoriser les mots de passe sur les cookies en vue
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
