Quería agregar una nueva clase (". when-hover") a algunos elementos HTML (vitrinas) cuando me movía sobre ellos. Así que escribí JS así:

 const beforeHover = document.getElementsByClassName("before-hover"); const showcases = document.getElementsByClassName("project-tile"); for (let showcase of showcases) { showcase.addEventListener("mouseover", addClass("when-hover")); } function addClass(newClass) { for (let el of beforeHover) { el.classList.add(newClass); } }

Pero cuando lo probé, la nueva clase (".when-hover") se agregó a los elementos desde el momento en que abrí la página. Pero quería que la nueva clase se agregara solo al pasar el mouse sobre ella. ¿Qué salió mal con mi código?

Aquí está mi código HTML:

 <a href="#"> <div class="project-tile"> <div class="project-showcase"> <img class="project-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg" alt="Overview image of project name Tribute Page"> </div> <div class="project-name"> <p><span class="before-hover">&#60;</span>Tribute Page<span class="before-hover">&#47;&#62;</span></p> </div> </div> </a>