Hacer que los eventos sucedan por separado, en JavaScript
Tue Dec 14 2021 21:45:27 GMT+0000 (Coordinated Universal Time)
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
Comments