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

Question

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

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

这些都具有由 CSS 完成的悬停颜色变化效果。

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

有没有办法在所有其他页面的母版页中将几行代码变白，所以任何一个链接都会在悬停时为其颜色变化设置动画？

提前致谢。

Answer 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）。

有关更多示例，请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Answer 2

这可以通过 jQuery（通过存在的3rd 方插件）或css3 transitions来实现。

小提琴：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供应商前缀，但应该添加/使用适用的前缀。

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