soy nuevo en la programacion con javascript, he estado desarrollando un blog y me estanque en un problema relativamente sencillo pero para mi no del todo
lo que quiero hacer es cambiar un icono de flecha apuntando hacia abajo por uno que apunta hacia arriba cada que deslizo el cursor por el nav,como si de un efecto se tratase,el problema es que solo se le aplica a un solo elemento cuando utilizo queryselector, esta ves utilize queryselectorall para acceder a la node list y recorrerla segun lo que he visto hasta ahora en la documentacion para poder aplicar ese efecto a todos los elementos. lo malo es que realmente no sucede y pasa exactamente lo mismo que con queryselector. he buscado documentacion y videos al respecto pero no he encontrado algo realmente util para mi caso,alguien conoce alguna funcionalidad adicional, o acaso mi logica no es la adecuada?
para no agregar mas contenido solo use un elemento li,pero son como 4 y tienen la clase topic, a la cual quiero llamar para activar los eventos
const selectNav = document.querySelectorAll("topic");
selectNav.forEach((index)=>{
index.addEventListener('mouseover',function(){
const selectIcon = document.querySelector('.select');
if(selectIcon.classList.contains('fa-angle-down') == true){
selectIcon.classList.remove('fa-angle-down');
selectIcon.classList.add('fa-angle-up');
}
});
index.addEventListener('mouseout',function(){
const selectIcon = document.querySelector('.select');
if(selectIcon.classList.contains('fa-angle-up') == true){
selectIcon.classList.remove('fa-angle-up');
selectIcon.classList.add('fa-angle-down');
}
});
});
<li class="topic"><a href="">proyectos <i class="fas fa-angle-down select"></i></a>
<ul>
<li><a href="">lista1</a></li>
<li><a href="">lista2</a></li>
<li><a href="">lista3</a></li>
</ul>
</li>