[Résolu] Problème de Mouseenter ou MouseLeave - Problème de débutant en javascript par JérômeMinatchy - page 1

Bonjour

Dans mon code j'ai 4 div et je souhaite quand ma souris passe au dessus de l'une d'entres elles faire apparaitre un texte propre a chacune d'entre elle que j'ai mis en tant qu'attribut dans mon html. Mon problème est que il arrive que quand je passe ma souris sur une div puis une autre que mon mouseleave soit déclenché alors que ma souris est encore sur la div concernée.

Voici mon code:

var e= document.getElementsByClassName("produit");
var i;
for(i=0;i<e.length;i++){
  e[i].addEventListener("mouseenter", dedans,false);
}

function dedans(e){
  document.getElementById("txt").textContent=e.currentTarget.getAttribute("texte");
  document.getElementById("ContAff").style.display="block";
  document.getElementById("record").textContent="dedans"+e.currentTarget.getAttribute("texte");
  e.currentTarget.removeEventListener("mouseenter", dedans,false);
  e.currentTarget.addEventListener("mouseleave", dehors,false);
}

function dehors(e){
  document.getElementById("ContAff").style.display="none";
  document.getElementById("record").textContent="dehors"+e.currentTarget.getAttribute("texte");
  e.currentTarget.removeEventListener("mouseleave", dehors,false);
  e.currentTarget.addEventListener("mouseenter", dedans,false);
}

mon HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="Ordinateur.css">
  
</head>
<body>
<!-- <div class="menu"><i class="fa fa-regular fa-list"></i></div> -->

<div class="produits">
<p id="record">rien</p>
<div class="prodtexte" id="ContAff">
<p id="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies, nibh vitae aliquam laoreet, enim lectus lobortis ante, nec ultricies nibh justo eget turpis.</p>
</div>

<div class="arriere">
  <div class="produit" texte="aaa">

</div>

<div class="produit" texte="bbb">

</div>

<div class="produit" texte="ccc">

</div>

<div class="produit" texte="ddd">

</div>

</div>

</div>

</body>
<script src="javascript.js"></script>
</html>

mon css:

.produits{
  height:40%;
  position:relative;
}
.produit{
  width:200px;
  height:200px;
  margin: 1%;
  background-color: red;
}
.prodtexte{
  height: 100%;
  width:100%;
  position:absolute;
  background: rgba(255,255,255,0.9);
  display:  none;
  text-align: center;
}

.arriere{
  display: flex;
}

-
Edité par JérômeMinatchy 6 octobre 2021 à 10:50:25

JérômeMinatchy

6 octobre 2021 à 10:48:28

piero5673

6 octobre 2021 à 11:59:13

Bonjour,

Quand la div avec l'id "ContAff" passe en display: block, elle passe au dessus du reste, notamment des div avec une classe produit. Vu qu'ils n'ont pas de relation parent-enfant, les évènements ne peuvent pas se transmettre de l'une à l'autre (on appelle ça propagation : l'évènement du parent se transmet à ses enfants).

Si les éléments restent dans le DOM, et que tu vas réutiliser les eventlisteners, pas besoin de faire de nettoyage.

6 octobre 2021 à 18:17:18

Merci de la réactivité de ta réponse je vais retravailler mon code en prenant ça en considération.

-
Edité par JérômeMinatchy 6 octobre 2021 à 18:17:37

Problème de Mouseenter ou MouseLeave

Problème de débutant en javascript

Problème de Mouseenter ou MouseLeave

Supprimer

Modérer

Signaler le message aux modérateurs