Hacer que los eventos sucedan por separado, en JavaScript

PHOTO EMBED

Tue Dec 14 2021 21:45:27 GMT+0000 (UTC)

Saved by @samn #javascript #eventos

let etiqueta = document.querySelectorAll('.etiqueta');

etiqueta.forEach(link => {
    link.addEventListener("mouseover",() => {
      let hijo = link.querySelectorAll('.hijo');
      
      hijo.forEach(l1=>{
        l1.classList.add("edd1");
      });
   });

    link.addEventListener("mouseleave",() => {
      let hijo = link.querySelectorAll('.hijo');
    
      hijo.forEach(l1=>{
        l1.classList.remove("edd1");
      });
   });
});

//css 
body{
display: flex;
}
.box{
width: 200px;
height: 200px;
border: solid 1px black;
}
.etiqueta{
width:100px;
height:100px;
position: absolute;
left:50px;
top:50px;
background: green;
overflow: hidden;
position:relative;
}
.hijo{
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: blue;
transition: all 0.2s ease;
transform: scale(0); /*desaparece el elemento hijo*/
}
.edd1{ /* la class que se agrega y se quita*/
background-color: red;
transform: scale(1); /*reaparece el elemento hijo con el mause al centro*/
};

//html
<div class="box">
  <div class="etiqueta">
  <div class="hijo"></div>
  </div>
</div> 

<div class="box">
  <div class="etiqueta">
  <div class="hijo"></div>
  </div>
</div>
content_copyCOPY

let hijo = link.querySelectorAll('.hijo'); se busca la etiqueta hijo cuando ya tiene un evento. dentro del addEvenlistener{ fijate en link. ---- el link es a una pregunta stackoverflow donde se puede ejecutar----

https://es.stackoverflow.com/questions/503229/hacer-que-los-eventos-sucedan-por-separado-en-javascript/503261#503261