Question

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

这是我的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: 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');

但我不能做的就是工作。

将鼠标悬停在列元素上时，我需要为其添加活动类，但要从节元素中删除活动类。
当悬停节元素添加类激活时。

Answer 1

使用jQuery .parent(".section")可以解决这个问题并使您的代码更加健壮，因为它可以独立处理多个部分而无需额外的代码。

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

div {
  padding: 10px;
}

.active {
  background-color: red;
}

.section{
  width:500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <div class="section">
    <div class="columns">Element 1</div>
    <div class="columns">Element 2</div>
  </div>
</div>

jQuery事件目标子元素

1 个答案: