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

Posted 2023-03-06

【中文标题】如何在悬停时为链接的颜色设置动画

【英文标题】：how to animate color of a link on hover

【发布时间】：2013-05-05 14:01:20

【问题描述】：

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

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

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

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

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

提前致谢。

【问题讨论】：

参见***.com/questions/6008324/fade-effect-on-link-hover - 接受的答案显示了如何使用 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）。

更多示例见https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

【讨论】：

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;