Javascript 如何设置悬停时链接颜色的动画

我的网站上有几种类型的链接

首先是没有任何样式（如背景）的简单链接。 第二类链接的背景颜色与按钮类似

它们都有悬停颜色变化的效果，这是由CSS实现的

我想要的是动画的颜色变化悬停，我希望它改变顺利

有没有办法在所有其他页面的母版页中用白色标出几行代码，这样任何一个链接都可以在悬停时设置颜色变化的动画

---

提前谢谢

最简单的方法是在

背景色

属性上使用CSS3转换

例如：

a {
    background-color: blue;
    -webkit-transition: background-color 1s;
    -moz-transition: background-color 1s;
    -o-transition: background-color 1s;
    transition: background-color 1s;
}
a:hover {
    background-color: red;
}

请注意，这不会在所有浏览器（例如IE8）中都起作用

---

有关更多示例，请参见

这可以通过jQuery（通过现有的）或

HTML

---

我只包含了

-webkit

供应商前缀，但应添加/使用适用的前缀。

尝试使用css3转换属性

演示：

---

请参阅-接受的答案显示了如何通过CSS转换实现这一点。这对没有背景样式的链接有效。只适合设置文本颜色的动画。如何对链接的背景进行同样的操作？谢谢。哦。。。。很抱歉刚刚收到。将“颜色”替换为“背景色”。也就是说：-）最重要的是包含

转换

样式，而不是供应商前缀样式

<a href="#">Hover me</a>

a,
a:hover {
    -webkit-transition: color ease-in-out 800ms;
    color: red;
}

a:hover {
    color: blue;
} 

a { 
   background-color: blue; 
   color: white; 
   transition-property: background-color, color; 
   transition-duration: 2s; 
   transition-timing-function: ease; 
}

a:hover { color: red; background-color: green; }