Mouseenter 在层次结构中仅标记一个活动节点

Question

我有几个嵌套的 div-s，当鼠标悬停在该元素上时，我只想将其中一个标记为活动状态。以下代码并非适用于所有情况。

代码示例： Red -> container Green -> outer Yellow -> inner Blue ->active

鼠标最里面div应该只有蓝色背景。

它只对很少的交互有效，而且大多数时候都失败了。对于这个问题，什么是最好的、资源占用更少的解决方案？

function markActive($el) {
  $el.addClass('active');
  $el.parent().triggerHandler('inactive');
}

function markInActive($el) {
  $el.removeClass('active');
  $el.parent().triggerHandler('active');
}

$('div').on({
  mouseenter: function() {
    markActive($(this));
  },
  mouseleave: function() {
    markInActive($(this));
  },
  inactive: function() {
    markInActive($(this));
  },
  active: function() {
    markActive($(this));
  }

});

div {
  clear: left;
  float: left;
  padding-left:20px;
  height: 400px;
  background: #f00;
}
div div {
  height: 125px;
  background: #0f0;
}
div div div {
  width: 280px;
  height: 50px;
  background: #ff0;
}
div.active {
  background: #00f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container">
  <div class="outer">
    <div class="inner">
      <span>Most inner #1</span>
    </div>
    <div class="inner">
      <span>Most inner #2</span>
    </div>
  </div>
  <div class="outer">
    <div class="inner">
      <span>Most inner #3</span>
    </div>
  </div>
</div>

Answer 1

通常我们需要的是 mouseenter 和 mouseleave 事件，当用户进入（或离开）子元素时不会触发这些事件。在您的情况下，您需要在这种情况下触发的旧 mouseout 和 mouseover 事件。

在您的评论中 post 有效 fiddle：https://jsfiddle.net/ddsxxeer/1/

:)

Mouseenter 在层次结构中仅标记一个活动节点

Mouseenter mark only one active node in hierarchy

javascript

mouse

jquery