如何在悬停时为链接的颜色设置动画答案

【问题标题】：how to animate color of a link on hover如何在悬停时为链接的颜色设置动画
【发布时间】：2013-05-05 14:01:20
【问题描述】：

我的网站上的链接类型很少。

First 只是简单的链接，没有任何样式，例如背景。第二种链接的背景颜色类似于按钮。

这两个都有通过 CSS 实现的悬停颜色变化效果。

我想要的是在悬停时为颜色变化设置动画，我希望它平滑地变化。

有什么方法可以在所有其他页面的母版页中将几行代码变白，因此单个链接会在悬停时为其颜色变化设置动画？

提前致谢。

【问题讨论】：

参见stackoverflow.com/questions/6008324/fade-effect-on-link-hover - 接受的答案显示了如何使用 CSS 过渡来实现这一目标。

标签： javascript jquery css

【解决方案1】：

最简单的方法是在 background-color 属性上使用 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）。

【讨论】：

k.这适用于没有背景样式的链接。很好的动画文本颜色。如何对链接的背景做同样的事情？谢谢。
哦……对不起。刚刚得到它。将“颜色”替换为“背景颜色”。就是这样:-)

【解决方案2】：

这可以通过 jQuery（通过存在的 3rd party plugins）或 css3 transitions 实现。

Fiddle: http://jsfiddle.net/ZKXWg/

HTML

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

CSS

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

a:hover {
    color: blue;
}

我只包含了-webkit 供应商前缀，但应添加/使用适用的前缀。

【讨论】：

最重要的是 transition 样式，而不是供应商前缀样式

【解决方案3】：

尝试使用 css3 过渡属性。

演示： http://jsfiddle.net/XjEC9/

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; }

【讨论】：