Comment implémenter la fonction de masquage des délais via JS
Jun 14, 2018 pm 04:42 PMCi-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!
Article chaud
Outils chauds Tags
Article chaud
Tags d'article chaud
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment utiliser JS et Baidu Maps pour implémenter la fonction Map Pan
Nov 21, 2023 am 10:00 AM
Comment utiliser JS et Baidu Maps pour implémenter la fonction Map Pan
Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS
Dec 17, 2023 pm 06:55 PM
Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS
Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS
Apr 03, 2024 am 11:55 AM
Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS
Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières
Dec 18, 2023 pm 03:39 PM
Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières
Comment créer un graphique en chandeliers boursiers en utilisant PHP et JS
Dec 17, 2023 am 08:08 AM
Comment créer un graphique en chandeliers boursiers en utilisant PHP et JS
Comment utiliser JS et Baidu Maps pour implémenter la fonction de dessin de polygones de carte
Nov 21, 2023 am 10:53 AM
Comment utiliser JS et Baidu Maps pour implémenter la fonction de dessin de polygones de carte
Comment utiliser JS et Baidu Map pour implémenter la fonction de traitement des événements de clic sur la carte
Nov 21, 2023 am 11:11 AM
Comment utiliser JS et Baidu Map pour implémenter la fonction de traitement des événements de clic sur la carte
Comment utiliser JS et Baidu Maps pour implémenter la fonction de carte thermique de carte
Nov 21, 2023 am 09:33 AM
Comment utiliser JS et Baidu Maps pour implémenter la fonction de carte thermique de carte
