jQuery: mouseenter/mouseleave even stop propagation

Question

I'm using mouseenter and mouseleave events in jquery on an unordered list's <li> to show some image when the mouse goes over them. Here's what that list typically looks like:

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

NOTE: I know it can be hard to read but I tried my best to make it as readable as possible.

So as you can see it's merely a tree used for an expand/collapse tree, each item being marked with class "treeItem". I need this class to stay and as it's a common class shared by all these items that need to show an image when mouse goes over them, I decided to bind my event handler to it.

The image that needs to be showed/hidden on mouseenter/mouseleave is the second of each item (the one with src="img/cross.png"). I managed to that quite easily with this script:

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

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

My problem though is that when an item is expanded (i.e. "Category 1" is expanded and "Subcategory 1 1" and "Subcategory 1 2" are now shown) and I hover any of the sub-categories with my mouse, these subcategories' images will be shown as asked but the parent category's (i.e. "Category 1") image won't hide as I'm still hovering it as well...

I tried using e.stopPropagation(); but it didn't do anything better..

Anyone knows a way to go around this and sort of trigger mouseleave on an element when I'm hovering some of its content ?

You can check http://api.jquery.com/mouseleave/#example-0 and especially the demo below the code block to see what I mean. Typically (on the right side of the demo) I would like that blue container's mouseleave event is triggered when mouse enters yellow container.

I hope my question is clear because it was hard to explain...

---

EDIT:

I found a way modifying my mouseenter event handler to this:

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

but that isn't perfect as I need to leave the entire parent item (i.e. "Category 1" item) and re-enter it to have the image shown again after hovering subitems.

If anyone has a better way please share!

Answer 1

add span to each category and subcategory:

<ul class="myTree">
    <li class="treeItem" catid="1" catname="Category 1">
        <img src="img/fleche_hori.png" class="expandImage"/>
        <span class="Item">Category 1</span>
        <img src="http://www.pokerland-il.com/images/smilies/smile.png" class="hidden removecategory"/>
        <ul>
            <li class="treeItem" catid="2" catname="Subcategory 1 1">
                <img src="" class="expandImage"/>
                <span class="Item">Subcategory 1 1</span>
                <img src="http://www.pokerland-il.com/images/smilies/smile.png" class="hidden removecategory"/>
            </li>
            <li class="treeItem" catid="3" catname="Subcategory 1 2">
                <img src="img/spacer.gif" class="expandImage"/>
                <span class="Item">Subcategory 1 2</span>
                <img src="http://www.pokerland-il.com/images/smilies/smile.png" class="hidden removecategory"/>
            </li>
        </ul>
    </li>
    <li class="treeItem" catid="4" catname="Category 2">
        ...
    </li>
</ul>​

change your JS to this:

$('.Item').mouseover(function(){
    $(this).next(".removecategory").show();
});

$('.Item').mouseout(function(){
    $(this).next(".removecategory").hide();
});​

http://jsfiddle.net/xBwyZ/3/