鼠标悬停时无法仅为当前卡片切换overlay类的问题求助

问题核心是你当前的代码在触发悬停事件时，操作的是所有.card-overlay元素，而不是当前悬停卡片内的那一个。只需修改事件处理函数，让它只针对当前卡片里的overlay进行类操作即可：

修改后的代码 #

const trendingCard = document.querySelectorAll(".card");

const showOverlay = function () {
  // 从当前悬停的卡片中找到对应的overlay
  this.querySelector(".card-overlay").classList.remove("hidden");
};

const hideOverlay = function () {
  this.querySelector(".card-overlay").classList.add("hidden");
};

trendingCard.forEach((card) => card.addEventListener("mouseover", showOverlay));
trendingCard.forEach((card) => card.addEventListener("mouseleave", hideOverlay));

逻辑说明 #

1. 不再需要全局获取所有.card-overlay元素，而是在触发事件时，通过this（指向当前被悬停的.card元素）找到它内部的.card-overlay。
2. querySelector只会查找当前元素的后代节点，所以只会操作当前卡片对应的overlay，不会影响其他卡片。

如果你习惯用事件对象而不是this，也可以这样写：

const showOverlay = function (event) {
  event.currentTarget.querySelector(".card-overlay").classList.remove("hidden");
};

const hideOverlay = function (event) {
  event.currentTarget.querySelector(".card-overlay").classList.add("hidden");
};

event.currentTarget和this在这里作用一致，都是指向绑定事件的那个.card元素。

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