jQuery: mouseenter/mouseleave даже остановить распространение

Я использую события mouseenter и mouseleave в jquery в неупорядоченном списке <li>, чтобы показать какое-то изображение, когда мышь проходит над ними. Вот как обычно выглядит этот список:

<ul class="myTree">
    <li class="treeItem" catid="1" catname="Category 1">
        <img src="img/fleche_hori.png" class="expandImage"/>
        Category 1
        <img src="img/cross.png" class="hidden removecategory"/>
        <ul>
            <li class="treeItem" catid="2" catname="Subcategory 1 1">
                <img src="img/spacer.gif" class="expandImage"/>
                Subcategory 1 1
                <img src="img/cross.png" class="hidden removecategory"/>
            </li>
            <li class="treeItem" catid="3" catname="Subcategory 1 2">
                <img src="img/spacer.gif" class="expandImage"/>
                Subcategory 1 2
                <img src="img/cross.png" class="hidden removecategory"/>
            </li>
        </ul>
    </li>
    <li class="treeItem" catid="4" catname="Category 2">
        ...
    </li>
</ul>

ПРИМЕЧАНИЕ. Я знаю, что это может быть трудно читать, но я постарался сделать его как можно более читабельным.

Итак, как вы можете видеть, это просто дерево, используемое для развертывания/свертывания дерева, каждый элемент помечен классом "treeItem". Мне нужно, чтобы этот класс остался, и, поскольку это общий класс, общий для всех этих элементов, которым нужно показывать изображение, когда мышь проходит над ними, я решил привязать к нему свой обработчик событий.

Изображение, которое нужно показать/скрыть при нажатии mouseenter/mouseleave, является вторым для каждого элемента (тот, у которого src="img/cross.png"). Мне это удалось довольно легко с помощью этого скрипта:

$(document).on("mouseenter", ".treeItem", function (e) {
    //e.stopPropagation();
    $(this).children(".removecategory").show();
});

$(document).on("mouseleave", ".treeItem", function (e) {
    //e.stopPropagation();
    $(this).children(".removecategory").hide();
});

Моя проблема, однако, заключается в том, что когда элемент расширяется (т.е. "Категория 1" расширяется и теперь отображаются "Подкатегория 1 1" и "Подкатегория 1 2"), и я наводил указатель мыши на любую из подкатегорий, эти подкатегории изображения будут отображаться в соответствии с запросом, но изображение родительской категории (т.е. «Категория 1») не будет скрываться, поскольку я все еще нахожу его...

Я попытался использовать e.stopPropagation(); но лучше не стало..

Кто-нибудь знает способ обойти это и как бы запустить mouseleave для элемента, когда я наводил курсор на часть его содержимого?

Вы можете проверить http://api.jquery.com/mouseleave/#example-0 и особенно демо под блоком кода, чтобы понять, что я имею в виду. Обычно (в правой части демонстрации) я хотел бы, чтобы событие mouseleave синего контейнера срабатывало, когда мышь входит в желтый контейнер.

Надеюсь, мой вопрос понятен, потому что его было трудно объяснить...

ИЗМЕНИТЬ:

Я нашел способ изменить обработчик события mouseenter следующим образом:

$(document).on("mouseenter", ".treeItem", function (e) {
    $('.removecategory').each(function() {
        $(this).hide();
    });
    $(this).children(".removecategory").show();
});

но это не идеально, так как мне нужно оставить весь родительский элемент (например, элемент «Категория 1») и повторно ввести его, чтобы изображение снова отображалось после наведения подэлементов.

Если у кого-то есть лучший способ, пожалуйста, поделитесь!