在SVG use和jQuery中使用Mouseenter/Mouseleave

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标签上时，我的li.menu-icon会触发'mouseleave'事件..我真的不明白为什么？！

感谢大家的阅读和帮助！

- Arthur

---

为什么不使用用户交互伪类:hover？ - King King

这只是一个更复杂代码的简单示例。我在CSS中使用:hover，但我需要在jQuery中获取这些信息以进行其他操作 :/ - Arthur

Answer 1

我很晚才了解到这个问题，但最近遇到了这个问题，不想用复杂的jQuery来防止指针在SVG图标上时触发mouseleave事件。我发现CSS属性

pointer-events: none; 

如果应用于SVG，可以解决此问题-实际上，该属性是SVG建议的一部分，并且专门用于类似情况：https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

- Marcatectura

Answer 2

当我们使用 <svg><use .. 时，实际上并没有将 SVG 复制到容器节点中。因此我们实际上会触发 mouse out 事件。

请参见 http://jsfiddle.net/8RCyD/5/ - @Erik 更新了链接，使用最新版本的 jQuery 解决了跨浏览器不一致性问题，感谢他。

我们可以

$(".menu-icon").append("#menu-icon"); /* the svg we want */

首先需要......然后再......

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

- Rob Sedgwick

---

这段代码对我有效，它使用一个初始化循环来克隆所有的SVG： http://jsfiddle.net/R9aeu/4/ - Arthur

@KingKing - 我这里用 Opera 19 没问题（只是 jQuery hover 添加类，为什么不行呢）。SVG 支持？- 奇怪为什么你这里不行。 - Rob Sedgwick

@RobSedgwick 是的，很奇怪，您可以尝试检查一下您的 Opera 的“关于”信息（通过 Help->About Opera），它会显示我的版本是 12.16，我也尝试了检查新更新，它告诉我我使用的是最新版本。 - King King

谢谢大家帮助我！这对我有用，但不知道是否支持SVG？ :/ 这篇文章讨论了SVG浏览器支持：http://tympanus.net/codrops/2013/11/27/svg-icons-ftw/ - Arthur

http://jsfiddle.net/8RCyD/2/在Opera 12.16中无法工作，因为该示例中使用的jQuery版本太旧。使用更新的jQuery版本可以正常工作，例如请参见http://jsfiddle.net/8RCyD/5/. - Erik Dahlström

Answer 3

你可以使用纯CSS代替jQuery:

.menu-icon:hover svg {
    background: #AB1;
    stroke: #e8e8e8;
    stroke-width: 2px;
}

更新的Fiddle

- Felix

---

我如何表达对国王的话，国王回答说：“这只是一个更复杂代码的简单示例。我在CSS中使用:hover，但我需要在jQuery中获取这些信息以进行其他操作 :/”。 - Arthur