鼠标中心/ Mouseleave在SVG上使用和jQuery

Question

我正在使用SVG图片构建我的菜单网站,我遇到了jQuery和mouseleave事件的问题.

这是我的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;
}

和jQuery:

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

- >代码在这里< -

但当鼠标在svg balise上时,我的li.menu-icon上有一个触发器'mouseleave'.我准备不明白为什么？!

谢谢大家的阅读和帮助!

Answer 1

我在这里参加派对很晚,但最近遇到了这个问题,并且对于过度复杂化我的jQuery并不感兴趣,以防止mouseleave指针超过SVG图标.我发现了CSS属性

pointer-events: none; 

如果它应用于SVG可以解决这个问题 - 事实上,该属性是SVG建议的一部分,专门针对类似的情况:https://developer.mozilla.org/en-US/docs/Web/CSS/指针事件