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

Question

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

我猜想JavaScript用于创建此效果，是否有人知道如何做到这一点？

- Miles Henrichs

---

谢谢。现在我明白如何制作悬停链接，只是我正在尝试弄清楚如何为我的悬停链接创建更平滑的效果。 - Miles Henrichs

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

这里演示

- Marcel

---

@AndreiCristof：幸运的是，它在IE10中可以工作（http://msdn.microsoft.com/en-us/library/ie/hh673535(v=vs.85).aspx）！也不需要供应商前缀（这很奇怪）。 - Marcel

我测试了两种方法，希望如果我找到了正确的原因，CSS 的方式不如 jQuery 的方式流畅。如果我错了，请纠正我。 - QMaster

你太棒了！讲解得非常清晰，通过看到它帮助了我很多。 - plast1K

我的测试是使用图像而不是链接。 - Felipe

@FelipeMicaroniLalli 最好发布一个问题，我猜这肯定是语法问题。 - Marcel

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示例!

- TURTLE

Answer 3

您可以使用JQueryUI来完成这个操作：

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

http://jsfiddle.net/dWCbk/

- Niclas Sahlin

---

你不需要使用jQueryUI，只需使用jQuery即可。 - chesscov77

不可以。jQuery 只能对“单一数字数值”进行动画处理，而颜色不属于该范畴（参见 https://api.jquery.com/animate/#animation-properties）。不过你实际上并不需要整个 jQueryUI 库，只需要 jQuery.Color 插件即可，它恰好嵌入在 jQueryUI 中。 - Niclas Sahlin

@Niclas Sahlin。我在搜索CSS过渡时发现了你的小提琴。你的JQuery-UI过渡效果更加流畅，我相信用户会注意到它。 - RubyRube

有一些使用 CSS 的解决方案，实现起来要容易得多。 - mhenkel

Answer 4

请在您的CSS中尝试以下内容：

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

- Dylan