jQuery事件目标子元素：鼠标悬停时切换父子元素active类问题

我来帮你搞定这个需求！你想要的是当鼠标悬停在.columns子元素上时，给它加上active类，同时移除它父元素的active类对吧？结合你给出的HTML结构和部分JS代码，我给你补全并解释完整的实现方案：

完整代码实现 #

HTML（你的原有结构） #

<div class="item">
  <div class="section" style="width:500px">
    <div class="columns">Element 1</div>
    <div class="columns">Element 2</div>
  </div>
</div>

JavaScript #

$(".item").on("mouseover", ".columns", function(event) {
  // 给当前悬停的.columns子元素添加active类
  $(this).addClass("active");
  
  // 移除最近的.item父元素的active类（如果父元素指.section，就把.item改成.section）
  $(this).closest(".item").removeClass("active");
  
  // 可选：移除其他兄弟.columns元素的active类，避免多个子元素同时高亮
  $(this).siblings(".columns").removeClass("active");
});

可选CSS（用于可视化效果） #

.active {
  background-color: #ffeb3b;
  font-weight: bold;
}
.columns {
  padding: 10px;
  border: 1px solid #ddd;
  margin: 5px 0;
  cursor: pointer;
}

关键逻辑解释 #

• 事件委托：用$(".item").on("mouseover", ".columns", ...)来绑定事件，好处是即使后续动态添加新的.columns元素，事件依然能生效，比直接给每个.columns绑定事件更高效。
• 目标元素操作：$(this)就是当前触发mouseover的.columns元素，直接调用addClass("active")就能给它加上样式类。
• 父元素类移除：closest(".item")会从当前元素向上查找，找到最近的.item父元素，然后用removeClass("active")移除它的类——如果你的“父元素”指的是中间的.section，只需要把选择器改成.section即可。
• 兄弟元素清理：siblings(".columns")会找到当前元素的所有同层级.columns兄弟，移除它们的active类，确保同一时间只有一个子元素高亮，这个是可选的，根据你的需求决定是否保留。

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