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>