Comme indiqué ci-dessous :
Copiez le code comme suit :
<html xmlns="http://www.w3.org/1999/xhtml">
<tête>
<titre></titre>
<style type="text/css">
.toopAstuce
{
couleur d'arrière-plan : jaune ;
style de bordure : solide ;
largeur de bordure : 1 px ;
couleur de la bordure : rouge ;
}
</style>
<langage de script="javascript" type="text/javascript">
/*
Si vous souhaitez que les bordures gauche et supérieure du div invité chevauchent le div affiché, vous devez supprimer l'en-tête du document selon la norme W3C.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
*/
fonction initEvent() {
var divArray = document.getElementsByTagName("div");
pour (var i = 0; i < divArray.length; i++) {
divArray[i].onmouseover = createDivDetailOne;
/*
Le div d'origine ne peut pas être utilisé pour lier l'événement de déplacement de la souris, car la largeur et la longueur du div détaillé sont plus grandes que le div d'origine.
De cette façon, le div d'origine est couvert et l'événement onmouseout sera automatiquement déclenché.
*/
//divArray[i].onmouseout = removeDivDetail;
}
}
fonction createDivDetailOne() {
//Assurer l'unicité de divDetail div
var divDetail = document.getElementById("divDetail");
si (divDétail)
{
document.body.removeChild(divDetail);
}
divObj = document.createElement("div");
divObj.className = "toopTip" ;
divObj.setAttribute("id", "divDetail");
divObj.style.position = "absolu" ;
divObj.style.width = "200px";
divObj.style.height = "100px";
var triggerObj = window.event.srcElement;
divObj.style.top = triggerObj.offsetTop ;
divObj.style.left = triggerObj.offsetLeft;
divObj.innerHTML = triggerObj.innerText;
document.body.appendChild(divObj);
//À l'heure actuelle, le div utilisé pour les détails a couvert le div d'origine, le div couvert doit donc être traité en cas d'événement.
document.getElementById("divDetail").onmouseout = function() {
divObj = ceci ;
si (!divObj) {
retour;
}
document.body.removeChild(divObj);
} ;
}
fonction RemoveDivDetail() {
var divObj = document.getElementById("divDetail");
si (!divObj) {
retour;
}
document.body.removeChild(divObj);
}
window.onload = initEvent;
</script>
</tête>
<corps>
<div id="divOne" style="couleur de fond : fuchsia ; largeur : 100 px ; hauteur : 100 px ;" >
Bonjour mon monde Js !
</div>
<div id="divTwo" style="background-color: Aqua; largeur: 100px; hauteur: 100px">
Bienvenue dans Mon Monde Js !
</div>
<div id="divThree" style="background-color : Gris ; largeur : 100px ; hauteur : 100px">
C'EST MON Monde Js !
</div>
</corps>
</html>