jQuery effect on mouseenter on nested
also activate parent

Question

I created a menu with submenu and on each li element I attached with lottie.js a svg element with animation on mouseenter.
I try to implement in jQuery all of this with .each() function for not write the same code for each li.
The issue is that when I go hover a sub li also the parent li animation is activated and I don't really understand why, 'cause the class output is specific for the element with mouse hover.

This is the HTML output of the menu

<nav>
    <div class="menu-main-menu-container">
        <ul id="menu-main-menu" class="menu">
            <li class="menu-item shoes">
                <a class="menu-item-link" href="#">
                    <div id="item-shoes"><!-- SVG icon with animation --></div>
                    <span class="menulink">Shoes</span>
                </a>
                    <ul class="sub-menu">
                        <li class="menu-item shoes-woman">
                            <a class="menu-item-link" href="#">
                                <div id="item-shoes-woman"><!-- SVG icon with animation --></div>
                                <span class="menulink">Shoes woman</span>
                            </a>
                        </li>
                        <li class="menu-item shoes-man">
                            <a class="menu-item-link" href="#">
                                <div id="item-shoes-man"><!-- SVG icon with animation --></div>
                                <span class="menulink">Shoes man</span>
                            </a>
                        </li>
                    </ul>
            </li>
            <li class="menu-item shirts">
                <a class="menu-item-link" href="#">
                    <div id="item-shirts"><!-- SVG icon with animation --></div>
                    <span class="menulink">Shirts</span>
                </a>
            </li>
        </ul>
    </div>
</nav>

This is the jQuery code I try

var menu_array = ['shoes', 'shirts', 'shoes-woman', 'shoes-man'];

$.each(menu_array, function(key, value) {
    var ID = document.getElementById('item-'+value);

    var menuicon = lottie.loadAnimation({
        container: ID,
        renderer: 'svg',
        loop: true,
        autoplay: false,
        path: basepath+'assets/img/'+value+'.json',
    });
    $('.'+value).on('mouseenter', function(){
        console.log(this);
        menuicon.goToAndPlay(1, true);
    });
    $('.'+value).on('mouseleave', function(){
        menuicon.goToAndStop(1, true);
    });
});

With this code I get the undesired result that if I go hover one sub li element, also the parent activate the animation.
I also tried to write the mouseenter and mouseleave events outside the each loop, but the result is the same.
I spend all my morning figured out where is the problem.
I only understood with the console.log that on sub li hover I get both li (parent and child), but I don't understand why 'cause the

$('.'+value).on('mouseenter', function(){
        console.log(this);
        menuicon.goToAndPlay(1, true);
    });

must print

$('.shoes-man').on('mouseenter', function(){
        console.log(this);
        menuicon.goToAndPlay(1, true);
    });

so only the selector .shoes-man must get the mouseenter event and not also the .shoes parent element.

Thank you

after some other tests I noticed that is not concerned about each loop. It's more like when I hover the sub li also the parent li is selected. in fact with this code `$('.shoes-woman').on('click', function(){ console.log($(this).attr('class')); });` in console i get `menu-item shoes-woman` and also `menu-item shoes` like both child and parent li are clicked also if I indicated only the sub li selector — Wolftrick, Jul 25 '19 at 14:15

Wolftrick · Answer 1 · 2019-07-26T17:18:42.343

I have find a solution on javascript $('.'+value+' > a').on('mouseleave', function(e){ on mouse event.
I finally find a solution on this answer. I didn't find it before: Nested Lists, jquery, and stopPropagation
So the working code is:

$.each(menu_array, function(key, value) {
    var ID = document.getElementById('item-'+value);

    var menuicon = lottie.loadAnimation({
        container: ID,
        renderer: 'svg',
        loop: true,
        autoplay: false,
        path: basepath+'assets/img/'+value+'.json',
    });
    $('.'+value+' > a').on('mouseenter', function(e){
        menuicon.goToAndPlay(1, true);
    });
    $('.'+value+' > a').on('mouseleave', function(e){
        menuicon.goToAndStop(1, true);
    });
});```

jQuery effect on mouseenter on nested also activate parent

1 Answers1

jQuery effect on mouseenter on nested
also activate parent