使用 jQuery 鼠标悬停时的 Svg 颜色过渡

Svg color transition on mouseover with jQuery?

本文关键字：Svg 颜色 jQuery 鼠标 悬停 使用      更新时间：2023-09-26

我的html中有一个"svg"标签，这是一个soundcloud图标。我希望 soundcloud 图标在鼠标悬停时过渡颜色，就像我在 CSS 中使用"过渡"属性一样。你可以看看下面链接中soundcloud图标两侧的twitter引导图标，看看我的意思。

我试过这个没有运气： 

$(".soundcloud")
.mouseenter(function() {
var color = "#ff7700";
$(this).animate({children().css('fill',color); 
}, 1000) })
.mouseleave(function() {
$(this).animate({children().css('fill','#FAFAFA');
}, 1000)});
});

该网站托管在这里： http://itstonygraham.com/archive/dev/

此脚本的版本位于结束正文标记之前。

我该如何制作这样的东西？

如果您考虑使用 css3，请查看 Adobe 关于动画 svg 的这篇博客文章

http://blogs.adobe.com/webplatform/2012/03/30/svg-animations-css-animations-css-transitions/

基本上只是在悬停时应用动画类，然后一些

相关文章：