3

En CSS es muy simple usar hover y darle una animación a botones por separado, pero quiero hacer esto con javascript y estoy seguro que hay algo que no estoy considerando.

Ejecute este código y al hacer hover en la caja verde notará que aparece un punto en ambas cajas.

Yo entiendo que al usar .querySelectorAll() me resulta un arreglo de todas las clases que coinciden, pero ¿cómo hago que se "interpolen" con el otro arreglo de clases? Para que me resulte las animaciones por separado.

Para dejar claro: quiero que al hacer hover sobre una caja verde aparezca solo su animación sin que también aparezca en la otra caja verde.

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

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

    link.addEventListener("mouseleave",() => {
       hijo.forEach(l1=>{
        l1.classList.remove("edd1");
        });
   });
});
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*/
};
<div class="box">
  <div class="etiqueta">
  <div class="hijo"></div>
  </div>
</div> 

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

2 respuestas 2

3

El problema que tienes es que tu variable hijo contiene todos los elementos con la clase .hijo de tu DOM, por lo que al sucederse los eventos vinculados a .etiqueta, va ha animarse todos.

A ti lo que te interesa es animar solamente el elemento .hijo que tenga como padre el elemento .etiqueta que dispara el evento. Es por eso que lo que hice fue declarar la variable hijo dentro del forEach en el que recorres las etiquetas y este hijo buscarlo en el elemento link en vez de en el document.

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");
      });
   });
});
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*/
};
<div class="box">
  <div class="etiqueta">
  <div class="hijo"></div>
  </div>
</div> 

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

1
  • Pensaba que al declarar una variable let, solo debías preocuparte por el scope; pero ahora entiendo que si lo declaras afuera este no tiene el evento, y cuando lo declaras adentro de link este tiene el evento lo que automáticamente resuelve el problema . woo!!! gracias por iluminarme!!!...
    – kraud
    Commented el 14 dic. 2021 a las 18:17
1

Como ha dicho @phpMyGuel el problema está en que seleccionas todos los hijos de todos los padres. Otra forma de resolverlo es usando el contexto (this) del elemento que esta ejecutando el evento. Osea buscar los hijos (querySelectorAll('.hijo')) de this.

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

etiqueta.forEach(link => {
  link.addEventListener("mouseover", function() {

    this.querySelectorAll('.hijo').forEach(l1 => { // <-- this es el padre
      l1.classList.add("edd1");
    });

  });

  link.addEventListener("mouseleave", function() {

    this.querySelectorAll('.hijo').forEach(l1 => {
      l1.classList.remove("edd1");
    });

  });
});
body {
  display: flex;
}

.box {
  width: 200px;
  height: 200px;
  border: solid 1px black;
}

.etiqueta {
  width: 100px;
  height: 100px;
  left: 50px;
  top: 50px;
  background: green;
  overflow: hidden;
  position: relative;
}

.hijo {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: blue;
  transition: all 0.2s ease;
  transform: scale(0);
}

.edd1 {
  background-color: red;
  transform: scale(1);
}

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

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

Si queremos usar el this no podemos usar las funciones flecha, tenemos que escribir function.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.