Mouseenter/Mouseleave on SVG use and jQuery

Question

I'm building my menu's website with SVG picture and I have a probleme with jQuery and the mouseleave event..

This is my HTML / CSS :

<div style="display:none;">
    <svg id ="home-icon" viewBox="0 0 64 64">
        <path  d="M57.0 <!-- .. SVG source Here ... --> 98z"/>
    </svg>
</div>
<ul id="top-menu">
    <li class="menu-icon">
        <svg><use xlink:href="#home-icon" /></svg>
    </li>
</ul>
.menu-icon svg{
    fill: #AB1;
    width:64px;height:64px; 
}
.menu-icon.active svg{
    background: #AB1;
    stroke: #e8e8e8;stroke-width: 2px;
}

And the jQuery :

$('.menu-icon').mouseenter(function(){
    $(this).addClass('active');
}).mouseleave(function(){
    $(this).removeClass('active');
});

-> Code here <-

But when the mouse is on the svg balise, I have a trigger 'mouseleave' on my li.menu-icon.. I ready don't understand why ?!

Thank you all for reading and help !

Answer 1

I'm late to the party here, but recently encountered this problem and wasn't interested in over-complicating my jQuery to prevent mouseleave when the pointer was over an SVG icon. I found that the CSS property

pointer-events: none; 

can solve this issue if it's applied to the SVG - in fact, the property is part of the SVG recommendation and is specifically intended for similar situations: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events