链接悬停的淡化效果？

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"来影响所有你的悬停样式的元素,如下所示.

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/