链路悬停的衰减效应? ？

现在人们只是在使用 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; }

演示完毕

您可以使用 JQueryUI 来实现这一点:

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

Http://jsfiddle.net/dwcbk/

我知道你在问题中说“我假设 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;
}

超文本标示语言

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

这是以上代码的 < strong > JSFIDDLE ！

Marcel 在其中一个答案中指出，你可以“转换多个 CSS 属性”，你也可以使用“所有”来影响元素与所有你的: 悬停样式如下。

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

超文本标示语言

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

这里是一个 < strong > JSFIDDLE 的“所有”例子！

在你的 css 里试试这个:

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