Question

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

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

使用鼠标的最内部div应该只有蓝色背景。

它仅适用于非常少的交互，并且大部分时间都失败。对于这个问题，什么是最好的，资源较少的解决方案？

＆＃13;

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));
  }

});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

在评论中，您发布了一个工作小提琴：https://jsfiddle.net/ddsxxeer/1/

：）

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

1 个答案: