链接悬停时的淡入淡出效果？

Question

在许多网站上，例如 http://www.clearleft.com，您会注意到，当链接将鼠标悬停在上方，它们会淡入不同的颜色，而不是立即切换（默认操作）。

我假设 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

我知道在问题中你说“我假设 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 > 对于上面的代码！

---

Marcel 在其中一个答案中指出，您可以“转换多个 CSS 属性”，也可以使用“all”来使用所有 :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 3

您可以使用 JQueryUI 执行此操作：

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

http://jsfiddle.net/dWCbk/

Answer 4

在你的 CSS 中试试这个：

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