如何使用onmouseover函数选中Nodelist中特定元素实现单div hover样式修改

你代码的核心问题是showContent方法中直接选中了页面内所有.card-content元素统一修改样式，没有限定仅操作当前被悬停的卡片对应内容，所以所有卡片都会同步变更。
你之前想用CSS实现失败是因为选择器逻辑不对，display:none的元素本身确实无法触发hover事件，但你可以把hover绑定在始终可见的父级.project_card上即可解决。

直接新增以下CSS规则即可，不需要保留原来的.show类，也不需要写JS逻辑：

/* 父级卡片悬停时，修改内部的card-content显示状态 */
.project .project_card:hover .card-content {
    display: flex;
}

同时删除HTML中所有onmouseover="showContent()"的绑定，以及对应的冗余JS代码即可。

步骤1：修改HTML事件绑定 #

给每个.project_card的事件传入当前元素实例，同时补充鼠标移出事件处理隐藏逻辑：

<div class="project_card card1" onmouseover="showContent(this)" onmouseout="hideContent(this)">
<!-- 其余所有project_card都按上面的格式修改 -->

步骤2：替换原有JS代码 #

// 仅修改当前悬停卡片的内容显示
function showContent(currentCard) {
    const currentContent = currentCard.querySelector('.card-content');
    currentContent.style.display = 'flex';
}

// 鼠标移出时隐藏对应卡片内容
function hideContent(currentCard) {
    const currentContent = currentCard.querySelector('.card-content');
    currentContent.style.display = 'none';
}

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