如何用JavaScript实现仅悬停父元素时修改其子元素颜色

问题背景 #

当悬停在蓝色的大区块（.small-container）上时，所有的小块（.logo-container）都会同时变为黑色。需要仅修改被悬停的蓝色区块内的小块颜色，且必须使用JavaScript实现（CSS的:hover方案不符合需求）。

原代码问题分析 #

原JavaScript代码中，每次触发mouseover事件时，会遍历所有.logo-container元素并修改类名，导致所有小块同时变色。要解决这个问题，只需定位到当前悬停容器内部的小块元素，而非全局操作。

修改后的完整代码 #

JavaScript #

const smallContainer = document.querySelectorAll(".small-container");

smallContainer.forEach((container) => {
  // 鼠标悬停时，修改当前容器内的小块样式
  container.addEventListener("mouseover", () => {
    const innerLogo = container.querySelector(".logo-container");
    innerLogo.classList.remove("logo-container");
    innerLogo.classList.add("logo-container-animation");
  });

  // 鼠标移出时，恢复当前容器内的小块样式（可选但推荐）
  container.addEventListener("mouseout", () => {
    const innerLogo = container.querySelector(".logo-container-animation");
    innerLogo.classList.remove("logo-container-animation");
    innerLogo.classList.add("logo-container");
  });
});

CSS（无需修改） #

.main-container {
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: space-between;
}

.small-container {
  height: 200px;
  width: 200px;
  background-color: blue;
  transition: all 0.5s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-container {
  height: 25px;
  width: 25px;
  background-color: rgb(255, 0, 0);
}

.logo-container-animation {
  background-color: rgb(0, 0, 0);
  height: 25px;
  width: 25px;
  transition: all 2s;
}

HTML（无需修改） #

<div class="main-container">
  <div class="small-container"><span class="logo-container"></span></div>
  <div class="small-container"><span class="logo-container"></span></div>
  <div class="small-container"><span class="logo-container"></span></div>
  <div class="small-container"><span class="logo-container"></span></div>
</div>

关键修改点 #

• 移除了全局的logoContainer变量，改为在每个悬停事件中，通过container.querySelector(".logo-container")获取当前容器内部的小块元素，确保只操作目标元素。
• 补充了mouseout事件处理，实现鼠标移出时恢复原样式，提升交互完整性。

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