Mouseenter отмечают только один активный узел в иерархии

Question

У меня есть несколько вложенных div-s, и я хотел бы отметить только один из них активным, когда мышь над этим элементом. Следующий код не работает для каждой ситуации.

Пример кода: Red -> container Yellow -> inner Blue ->active

Самый внутренний ДИВ с помощью мыши должны иметь только синий фон.

Он работает только для очень небольшого количества взаимодействий и большую часть времени он терпит неудачу. Каким будет лучшее и менее ресурсоемкое решение этой проблемы?

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 события, тем не срабатывает, когда пользователь вводит (OU листья) дочерний элемент. В вашем случае вам нужны старые события mouseout и mouseover, которые запускаются в этих случаях.

В комментариях вы после рабочей скрипки: https://jsfiddle.net/ddsxxeer/1/

:)