Estoy tratando de cambiar el fondo de los elementos con la clase "título" al pasar el mouse.
const heading = document.querySelector('.heading'); const headingAll = document.querySelectorAll('.heading'); headingAll.forEach(item => { item.addEventListener("mouseover",()=>{ heading.style.backgroundColor='teal'; }); }) .heading{ background-color: yellow; width: 50%; margin:0 auto; padding: 10px; border: 1px solid red; cursor: pointer; } .heading2,heading3{ margin-top: 10px; } <h1 id='heading' class='heading heading2'>First Heading</h1> <h2 id='heading' class='heading heading2'>Sub Heading</h2> <h3 id='heading' class='heading heading3'>Third Heading</h3>El problema es que el fondo solo cambia para el primer elemento con la clase "título". No sé cómo hacer que esto funcione para los otros elementos. ¿Cómo puedo conseguir esto?
En su fragmento de código, no está siguiendo la variable de iterador que configuró en su función de devolución de llamada forEach . Cambie eso a item en lugar de heading y debería funcionar.
const headingAll = document.querySelectorAll('.heading'); headingAll.forEach(item => { item.addEventListener("mouseover",()=>{ item.style.backgroundColor='teal'; }); }) .heading{ background-color: yellow; width: 50%; margin:0 auto; padding: 10px; border: 1px solid red; cursor: pointer; } .heading2,heading3{ margin-top: 10px; } <h1 id='heading' class='heading heading2'>First Heading</h1> <h2 id='heading' class='heading heading2'>Sub Heading</h2> <h3 id='heading' class='heading heading3'>Third Heading</h3> Tenga en cuenta que me deshice de su variable de heading , ya que no necesitaba usarse en mi fragmento.
Está utilizando document.querySelector() para obtener el elemento con el encabezado del nombre de clase, si hay más de un elemento, solo obtendrá el primero. Aquí debe usar el elemento en lugar del encabezado para cambiar el estilo de los elementos a los que está agregando el evento de mouseover.