mouse over事件仅作用于单张卡片的问题解决问询

方案一：用CSS :hover伪类（推荐，最简单） #

不需要JS，直接通过CSS就能实现，代码更简洁、性能更优，还能添加平滑过渡效果：

1. 清理HTML冗余代码：移除重复的id="CardHover"以及onmouseover、onmouseout事件绑定

<div class="report" onclick="location.href='#';">
    <img style="width: 100%; height: 100%; border-radius: 10px;" src="#.png" alt="">
    <div style="display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px;">
        <h6>#ServiceDesign  #DesignThinking  #Ethnography</h6>
        <h4>Title</h4>
        <p>Body Copy</p>
        <a href="#" class="tertiary">Explore</a>
    </div>
</div>

<div class="report" onclick="location.href='#';">
    <img style="width: 100%; height: 100%; border-radius: 10px;" src="#.png" alt="">
    <div style="display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px;">
        <h6>#ServiceDesign  #DesignThinking  #Ethnography</h6>
        <h4>Title</h4>
        <p>Body Copy</p>
        <a href="#" class="tertiary">Explore</a>
    </div>
</div>

2. 添加CSS样式：

.report {
    box-shadow: -6px 6px 0px 0px #000;
    /* 可选：添加过渡动画让阴影变化更平滑 */
    transition: box-shadow 0.3s ease;
}

.report:hover {
    box-shadow: -6px 6px 0px 0px #FF8A88;
}

方案二：修改JS代码实现 #

如果必须用JS实现，核心要解决两个问题：ID不能重复、操作触发事件的当前卡片：

1. 调整HTML：移除重复ID，在事件绑定中传入this（当前触发事件的卡片元素）

<div class="report" onclick="location.href='#';" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)">
    <img style="width: 100%; height: 100%; border-radius: 10px;" src="#.png" alt="">
    <div style="display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px;">
        <h6>#ServiceDesign  #DesignThinking  #Ethnography</h6>
        <h4>Title</h4>
        <p>Body Copy</p>
        <a href="#" class="tertiary">Explore</a>
    </div>
</div>

<div class="report" onclick="location.href='#';" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)">
    <img style="width: 100%; height: 100%; border-radius: 10px;" src="#.png" alt="">
    <div style="display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px;">
        <h6>#ServiceDesign  #DesignThinking  #Ethnography</h6>
        <h4>Title</h4>
        <p>Body Copy</p>
        <a href="#" class="tertiary">Explore</a>
    </div>
</div>

2. 修改JS函数，接收传入的卡片元素并操作：

function mouseOver(card) {
    card.style.boxShadow = "-6px 6px 0px 0px #FF8A88";
}

function mouseOut(card) {
    card.style.boxShadow = "-6px 6px 0px 0px #000";
}

进阶：事件委托（更优雅） #

不需要给每个卡片单独绑定事件，通过父容器统一监听：

// 假设所有卡片都在class为card-container的父容器内
document.querySelector('.card-container').addEventListener('mouseover', function(e) {
    const card = e.target.closest('.report');
    if (card) {
        card.style.boxShadow = "-6px 6px 0px 0px #FF8A88";
    }
});

document.querySelector('.card-container').addEventListener('mouseout', function(e) {
    const card = e.target.closest('.report');
    if (card) {
        card.style.boxShadow = "-6px 6px 0px 0px #000";
    }
});

这种方式无需修改HTML中的事件属性，更便于维护。

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