Tengo el siguiente código:
const hover = document.getElementsByClassName('child');
hover[0].addEventListener('mouseover', () => {
hover[0].style.backgroundColor = 'red';
});
hover[0].addEventListener('mouseout', () => {
hover[0].style.backgroundColor = null;
});
hover[1].addEventListener('mouseover', () => {
hover[1].style.backgroundColor = 'red';
});
hover[1].addEventListener('mouseout', () => {
hover[1].style.backgroundColor = null;
});
hover[2].addEventListener('mouseover', () => {
hover[2].style.backgroundColor = 'red';
});
hover[2].addEventListener('mouseout', () => {
hover[2].style.backgroundColor = null;
});
//EL PROBLEMA ES ESTE CICLO FOR (Quiero hacer lo mismo de arriba, pero con un ciclo for)
/*for (var x=0; x<hover.lenght; x++){
hover[x].addEventListener('mouseover', () => {
hover[x].style.backgroundColor = 'red';
});
hover[x].addEventListener('mouseout', () => {
hover[x].style.backgroundColor = null;
});
}*/
body {
margin: 0 auto;
padding: 0;
display: flex;
justify-content: space-between;
max-width: 500px;
height: 300px;
align-items: center;
}
div, p {
margin: 0;
padding: 0;
}
.child:nth-child(1) {
background-color: green;
color: blue;
}
.child:nth-child(2) {
background-color: lightgreen;
color: gray;
}
.child:nth-child(3) {
background-color: purple;
color: lightblue;
}
div {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
user-select: none;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="child">
<p>Circle 1</p>
</div>
<div class="child">
<p>Circle 2</p>
</div>
<div class="child">
<p>Circle 3</p>
</div>
</body>
</html>
Como pueden ver, accedí a todas las clases con el nombre de 'child', y posteriormente realice un cambio del color de fondo de los círculos con un addEventListener. Si me sale lo que yo quiero, pero el problema es que no quiero que abarque muchas lineas de código (ya que este es sólo un ejemplo de un proyecto más grande), y para ello pensé en un ciclo for, pero no me funciona, y ya intenté también con un ciclo do-while. Alguna respuesta del porque no me está funcionando?