对链接悬停的淡化效果？ [英] Fade Effect on Link Hover?

问题描述

在许多网站上，例如 http://www.clearleft.com ，您会注意到，当链接悬停在，他们会褪色成不同的颜色，而不是立即切换，默认动作。

on many sites, such as http://www.clearleft.com, you'll notice that when the links are hovered over, they will fade into a different color as opposed to immediately switching, the default action.

我假设JavaScript是用来创建这个效果，有谁知道吗？ p>

I assume JavaScript is used to create this effect, does anyone know how?

推荐答案

现在人们只是使用 CSS3转换，因为它比搞乱JS ，浏览器

Nowadays people are just using CSS3 transitions because it's a lot easier than messing with JS, browser support is reasonably good and it's merely cosmetic so it doesn't matter if it doesn't work.

这样的工作可以完成：

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属性，像这样：

You can also transition specific CSS properties with different timings and easing functions by separating each declaration with a comma, like so:

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

在此演示

这篇关于对链接悬停的淡化效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！