forEach与addEventListener绑定问题：鼠标悬停仅触发当前元素事件

你的问题出在事件绑定的对象错误——直接调用addEventListener时，默认会把事件绑定到全局上下文（比如window），所以只要页面上有鼠标悬停/移出事件，所有绑定的回调都会执行，导致操作影响所有元素。

要实现单个元素悬停仅操作自身，只需把事件绑定到当前遍历的project元素上，然后在回调里针对该元素内部的描述框进行操作：

const $projects = document.querySelectorAll(".projects__grid__element")

$projects.forEach(project => {
    // 绑定mouseover到当前project元素
    project.addEventListener('mouseover', () => {
        const $projectDescription = project.querySelector(".projects__grid__element__description");
        $projectDescription.style.display = "flex";
    });
    // 绑定mouseout到当前project元素
    project.addEventListener('mouseout', () => {
        const $projectDescription = project.querySelector(".projects__grid__element__description");
        $projectDescription.style.display = "none";
    });
})

额外优化建议 #

如果你的描述框是project的子元素，建议用mouseenter和mouseleave代替mouseover/mouseout，因为后两者会因为事件冒泡，当鼠标移入子元素时也会触发父元素的mouseout事件，体验不够流畅：

const $projects = document.querySelectorAll(".projects__grid__element")

$projects.forEach(project => {
    project.addEventListener('mouseenter', () => {
        const $projectDescription = project.querySelector(".projects__grid__element__description");
        $projectDescription.style.display = "flex";
    });
    project.addEventListener('mouseleave', () => {
        const $projectDescription = project.querySelector(".projects__grid__element__description");
        $projectDescription.style.display = "none";
    });
})

内容的提问来源于stack exchange，提问作者6y443v3r