淡入淡出对链接hover的影响？

在许多网站上，比如http://www.clearleft.com ，你会注意到，当链接hover时，它们会褪色成不同的颜色，而不是立即切换默认的动作。

我认为JavaScript是用来创造这种效果，有谁知道如何？

Answer 1

现在人们只是使用CSS3转换，因为它比JS搞乱了很多，浏览器的支持是相当不错的，它只是表面化的，所以如果它不起作用没关系。

像这样的东西可以完成这项工作：

a { color:blue; /* First we need to help some browsers along for this to work. Just because a vendor prefix is there, doesn't mean it will work in a browser made by that vendor either, it's just for future-proofing purposes I guess. */ -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; /* ...and now for the proper property */ transition:.5s; } a:hover { color:red; } 

您还可以通过用逗号分隔每个声明来使用不同的定时和缓动函数来过渡特定的CSS属性，如下所示：

 a { color:blue; background:white; -o-transition:color .2s ease-out, background 1s ease-in; -ms-transition:color .2s ease-out, background 1s ease-in; -moz-transition:color .2s ease-out, background 1s ease-in; -webkit-transition:color .2s ease-out, background 1s ease-in; /* ...and now override with proper CSS property */ transition:color .2s ease-out, background 1s ease-in; } a:hover { color:red; background:yellow; } 

在这里演示

Answer 2

你可以用JQueryUI做到这一点：

 $('a').mouseenter(function(){ $(this).animate({ color: '#ff0000' }, 1000); }).mouseout(function(){ $(this).animate({ color: '#000000' }, 1000); }); 

http://jsfiddle.net/dWCbk/

Answer 3

我知道在你的状态“我认为JavaScript是用来创造这个效果”的问题，但CSS也可以使用，下面的例子。

CSS

 .fancy-link { color: #333333; text-decoration: none; transition: color 0.3s linear; -webkit-transition: color 0.3s linear; -moz-transition: color 0.3s linear; } .fancy-link:hover { color: #F44336; } 

HTML

 <a class="fancy-link" href="#">My Link</a> 

这里是上面代码的JSFIDDLE ！

---

马塞尔在其中的答案指出，你可以“过渡多个CSS属性”，你也可以使用“全部”来使用你所有的：像下面的hover风格的元素。

CSS

 .fancy-link { color: #333333; text-decoration: none; transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; } .fancy-link:hover { color: #F44336; padding-left: 10px; } 

HTML

 <a class="fancy-link" href="#">My Link</a> 

这里是“全部”例子的JSFIDDLE ！

Answer 4

试试这个在你的CSS：

 .a { transition: color 0.3s ease-in-out; } .a { color:turquoise; } .a:hover { color: #454545; }