javascript - Jquery 与 css 的悬停不同

Question

我在使用 jquery 中的悬停方法时遇到了一些问题。我正在做一个 svg 并且我正在尝试为他制作动画。

问题是，当我将鼠标悬停在元素上时，它会循环并且永不停止。

这是我的 svg 路径:

<path id="test" d="M2,4 Q 5,6 8,4" />

这是我的 jquery 代码:

$('#test').hover(function() {
    $('path#test').attr('d', "M2,4 Q 5,6 8,4");
 }, function () {
    $('path#test').attr('d', "M2,6 Q 5,4 8,6");
 });

https://jsfiddle.net/wwg93swz/

这是问题的屏幕: 我想要 :hover 在 CSS 中:

我的第二个屏幕的 css 代码:

svg:hover #test {
  d: path("M2,6 Q 5,4 8,6");
}

我想在 JS 上做同样的事情。

感谢您的帮助。

Answer 1

您在路径(嘴巴)悬停上分配了事件，问题是每当您将鼠标放在它上面时，它就会移动并且不再悬停。与您在 CSS 中所做的一样，直接在 svg 上分配悬停事件:

$('svg').hover(function() {
    $('path#test').attr('d', "M2,4 Q 5,6 8,4");
}, function () {
    $('path#test').attr('d', "M2,6 Q 5,4 8,6");
});

也在 Updated Fiddle 上.