如何用JavaScript mouseOver/mouseOut实现鼠标进出卡片时修改内部按钮类名

问题根源 #

• document.querySelectorAll() 返回的是NodeList集合，不能直接调用addEventListener，必须遍历集合里的每个元素单独绑定事件
• HTML里重复使用了id="button-primary"，ID在页面中必须唯一，这会导致getElementById永远只返回第一个匹配的元素
• 鼠标事件触发时，你用全局的document.querySelector/getElementById找按钮，只会选中页面里第一个匹配的按钮，而不是当前悬停卡片内部的按钮

修正方案 #

1. 移除重复的ID，只用类名button-primary标识按钮
2. 遍历所有.version-card元素，给每个元素单独绑定mouseover和mouseout事件
3. 在事件处理函数里，用this指代当前悬停的卡片，再通过this.querySelector(".button-primary")找到当前卡片内部的按钮，这样就能精准操作对应卡片的按钮

修正后的完整代码 #

HTML

<div class="version-card" style="padding:30px;border:2px solid black;">
  <div class="card-content">
    <h1>header</h1>
    <p>blah blah blah</p>
    <a class="button-primary" style="padding:20px; background:green;">Button</a>
  </div>
</div>

<div class="version-card" style="padding:30px;border:2px solid black;">
  <div class="card-content">
    <h1>header</h1>
    <p>blah blah blah</p>
    <a class="button-primary" style="padding:20px; background:green;">Button</a>
  </div>
</div>

<div class="version-card" style="padding:30px;border:2px solid black;">
  <div class="card-content">
    <h1>header</h1>
    <p>blah blah blah</p>
    <a class="button-primary" style="padding:20px; background:green;">Button</a>
  </div>
</div>

CSS

.active {
  background: red !important;
}

JavaScript

// 获取所有卡片元素
const cards = document.querySelectorAll(".version-card");

// 遍历每个卡片，绑定事件
cards.forEach(card => {
  card.addEventListener("mouseover", mouseOver);
  card.addEventListener("mouseout", mouseOut);
});

function mouseOver() {
  // 通过当前卡片（this）找到内部的按钮
  this.querySelector(".button-primary").classList.add("active");
}

function mouseOut() {
  this.querySelector(".button-primary").classList.remove("active");
}

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