jQuery事件目标子元素

我试图将活动类应用于子元素，并在子元素发生鼠标悬停事件时从父元素中删除活动类

这是我的html：

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

但是我不能让它工作

当鼠标悬停在columns元素上时，我需要向其中添加活动类，但从section元素中删除活动类

悬停部分元素时，添加类处于活动状态

使用jQuery

.parent（“.section”）

可以解决这个问题，并使代码更加健壮，因为它能够独立处理多个部分，而不需要额外的代码

$（“.item”）。在({
鼠标悬停：函数（事件）{
if（$（event.target）.is（“.columns”））{
$（event.target）.addClass（“活动”）；
$（event.target）.parent（.section”）.removeClass（“active”）；
}否则{
$（此）.addClass（“活动”）；
};
},
mouseout:function（）{
$（此）.removeClass（“活动”）；
}
}，“.节，.列”）
div{
填充：10px；
}
.主动{
背景色：红色；
}
.科{
宽度：500px；
}

要素1
要素2

  $(".item").on({
      mouseover: function (event) {
          $(this).addClass("active");
          if($(event.target).is(".columns") && $(event.target).hasClass("active")) {
              $(".section", event.target).removeClass("active");
          } else {
              $(".section", event.target).addClass("active");
          }
      },

      mouseout: function () {
          $(this).removeClass("active");
      }
  }, '.section, .columns');