链接悬停的淡入淡出效果？答案

【问题标题】：Fade Effect on Link Hover?链接悬停的淡入淡出效果？
【发布时间】：2011-08-25 21:14:20
【问题描述】：

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

我假设使用 JavaScript 来创建这种效果，有人知道怎么做吗？

【问题讨论】：

谢谢。现在，我了解了如何制作悬停链接，只是想弄清楚如何为悬停链接创建更平滑的效果。

标签： css hover fade effect

【解决方案1】：

现在人们只使用CSS3 transitions，因为它比messing with 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; }

Demo here

【讨论】：

@AndreiCristof：幸运的是works in IE10 though！也不需要供应商前缀（这很奇怪）。
我测试了两者，我希望如果我找到正确的原因，CSS 方式不像 jQuery 方式那样流畅和流畅。如果我错了，请纠正我。
你摇滚！解释得很好，看到它帮助了我很多。
我的测试是图片，不是链接。
@FelipeMicaroniLalli 最好发布一个我猜的问题，听起来肯定是语法问题。

【解决方案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 用于“全部”示例！

【讨论】：

【解决方案3】：

你可以用 JQueryUI 做到这一点：

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

http://jsfiddle.net/dWCbk/

【讨论】：

你不需要 jqueryui，只需要 jquery
@Juan 不，jQuery 只能为“单个数值”设置动画，而颜色不是（请参阅api.jquery.com/animate/#animation-properties）。但实际上你并不需要整个 jQueryUI 库，只需要 jQuery.Color 插件，恰好嵌入到 jQueryUI 中。
@Niclas Sahlin。我发现你的小提琴正在搜索 CSS 过渡。您的 JQuery-UI 转换更加流畅，我相信用户会注意到它。
有css的解决方案，实现起来更容易

【解决方案4】：

在你的 CSS 中试试这个：

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

【讨论】：