I wanted to add a new class(".when-hover") to some HTML elements(showcases) when I hovered on them. So I wrote JS like this:

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);
    }
}

But when I tested it, the new class (".when-hover") was added to the elements from the moment I opened the page. But I wanted the new class to be added only when hovering (mouseover). What went wrong with my code?

Here's my HTML code:

<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>