如何在JavaScript中实现鼠标悬停Article元素时触发指定函数？

我来帮你排查下问题所在，然后给出修复方案：

你的代码里的几个关键问题： #

1. 选择器目标错误：你用document.querySelectorAll(".TestClass")选中的是外层的div容器，而不是你想要监听的<article>元素，这样事件会在整个div范围内触发，不符合你“悬停单个article才执行”的需求。
2. 事件回调传递错误：addEventListener("mouseover", myfunction())里的myfunction()会直接执行函数（括号是调用函数的语法），而不是把函数作为事件触发时的回调传入。你应该传函数本身，也就是myfunction不带括号。
3. NodeList无法直接绑定事件：querySelectorAll返回的是一个NodeList元素集合，不能直接对整个集合调用addEventListener，需要遍历每个元素单独绑定事件。

修复后的代码示例： #

// 精准选中TestClass容器下的所有article元素
const targetArticles = document.querySelectorAll(".TestClass article");

// 遍历每个article，分别绑定鼠标悬停事件
targetArticles.forEach(article => {
  article.addEventListener("mouseover", myfunction);
  
  // 可选：如果需要鼠标离开后恢复原内容，可绑定mouseout事件
  // article.addEventListener("mouseout", resetContent);
});

// 你的内容修改函数（示例）
function myfunction() {
  // 用this获取当前悬停的article元素，精准修改它内部的h2和p
  const currentH2 = this.querySelector("h2");
  const currentP = this.querySelector("p");
  
  currentH2.textContent = "悬停状态的标题";
  currentP.textContent = "悬停状态的段落内容";
}

// 可选：恢复原内容的函数示例
// function resetContent() {
//   const currentH2 = this.querySelector("h2");
//   const currentP = this.querySelector("p");
//   // 这里可以根据实际情况还原内容，比如存初始值或者判断标题文本
//   currentH2.textContent = currentH2.textContent.includes("悬停") ? "Wort" : "Wort2";
//   currentP.textContent = currentH2.textContent === "Wort" ? "Testparagraph" : "Testparagraph2";
// }

额外说明： #

• 用this可以直接获取当前触发事件的article元素，这样就能精准修改该article下的h2和p，不会影响页面上的其他article。
• 如果需要鼠标离开后恢复原来的内容，可以参考注释里的resetContent函数，绑定mouseout事件来实现双向切换。

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