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

Answer 3

尝试使用css3过渡属性。

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

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

3 个答案:

HTML

CSS