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/

以下是问题的屏幕： 我想像：悬停在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。