我在使用 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 代码:
svg:hover #test {
d: path("M2,6 Q 5,4 8,6");
}
我想在 JS 上做同样的事情。
感谢您的帮助。
最佳答案
您在路径(嘴巴)悬停上分配了事件,问题是每当您将鼠标放在它上面时,它就会移动并且不再悬停。与您在 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 上.
关于javascript - Jquery 与 css 的悬停不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49153749/