1

Con una estructura HTML ul>li simple :

<ul class="contenido">
     <li class="contenido_item">index</li>
     <li class="contenido_item">index</li>
     <li class="contenido_item">index</li>
</ul>

Con un JS :

let li = document.getELementByClassName("contenido");

function getAnimacion(){
   for(let i=0; i<li.length; i++){
    li[i].addEventListener("mouseover",function(){
       li[i].style.color = "red";
    });

   }

getAnimacion();

INTENCION

Cuando te posiciones encima de un ítem ("li") este debe cambiar de color a rojo... pero no cambia.

Si lo haces de manera individual fuera del bucle dándole la posición a mano si.

li[0].addEventListener("mouseover",function()){
     li[0].style.color = "red";
}

Lo he intentado con querySelector, con function async... y no he logrado nada si alguien puede mostrarme y explicarme como puedo hacerlo y en que fallo lo agradecería.

1
  • Quieres que cambie solo color rojo o cuando se aleje el mouse se vuelva a su color original el 5 dic. 2020 a las 14:35

4 respuestas 4

2

Puedes usar un querySelector sobre la clase .contenido, luego obtener todos los lis y recorrerlos para agregarles el eventListener.

let lis = document.querySelector('.contenido').getElementsByTagName('li');

[].forEach.call(lis, element => {
  element.addEventListener('mouseover', () => {
     element.style.color = 'red';
  });
});
<ul class="contenido">
     <li class="contenido_item">index1</li>
     <li class="contenido_item">index2</li>
     <li class="contenido_item">index3</li>
</ul>

1

Los elementos que debes seleccionar son los que tienen como className contenido_item. Además el método a utilizar para seleccionar los elementos está mal escrito, debe ser getElementsByClassName.

let li = document.getElementsByClassName("contenido_item");

function getAnimacion(){
   for(let i=0; i<li.length; i++){
    li[i].addEventListener("mouseover",function(){
       li[i].style.color = "red";
    });
  }
}

getAnimacion();
<ul class="contenido">
     <li class="contenido_item">index</li>
     <li class="contenido_item">index</li>
     <li class="contenido_item">index</li>
</ul>

1
let li = document.getELementByClassName("contenido_item");

li.onmouseover = getAnimacion();

function getAnimacion() {
 li.style.color = "red";
}

Asi seria individualmente tomando la clase de cada li.

2
  • 1
    Tienes 2 errores en tu codigo. El primero es esta mal escrito getElementsByClassName, deberia ser asi. El segundo error es que no funcionaria tu codigo porque el metodo getElementsByClassName devuelve una coleccion el 5 dic. 2020 a las 15:25
  • Buenas observaciones @JuanRivera, anexo a lo que ya te mencionan Tomas deberías o bien indicar el índice el elemento deseado o bien iterarlos con un ciclo
    – user128299
    el 5 dic. 2020 a las 15:38
0

Lo que puedes hacer es lo siguiente agregando un id en el ul y quitando las demas clases. Esto porque usando el id sera el padre para dar evento a los li

let ul = document.getElementById("contenido");

ul.addEventListener("mouseover", function( li) {
  li.target.style.color = "red";
}, false);
<ul id="contenido">
     <li>index</li>
     <li>index</li>
     <li>index</li>
</ul>

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.