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

Fade Effect on Link Hover?

提问by Miles Henrichs

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.

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

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

我假设 JavaScript 用于创建这种效果，有谁知道如何？

回答by Marcel

Nowadays people are just using CSS3 transitionsbecause 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.

现在人们只是使用CSS3 过渡，因为它比使用 JS容易得多，浏览器支持相当好而且它只是装饰性的，所以它是否不起作用也没关系。

Something like this gets the job done:

像这样的事情可以完成工作：

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

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

您还可以通过用逗号分隔每个声明来转换具有不同时间和缓动功能的特定 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

演示在这里

回答by Jake

I know in the question you state "I assume JavaScript is used to create this effect" but CSS can be used too, an example is below.

我知道您在问题中说“我假设使用 JavaScript 来创建这种效果”，但也可以使用 CSS，下面是一个示例。

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

HTML

<a class="fancy-link" href="#">My Link</a>

And here is a JSFIDDLEfor the above code!

这是上面代码的JSFIDDLE！

---

---

Marcel in one of the answers points out you can "transition multiple CSS properties" you can also use "all" to effect the element with all your :hover styles like below.

Marcel 在其中一个答案中指出，您可以“转换多个 CSS 属性”，也可以使用“all”来影响具有所有 :hover 样式的元素，如下所示。

CSS

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

HTML

<a class="fancy-link" href="#">My Link</a>

And here is a JSFIDDLEfor the "all" example!

这是“所有”示例的JSFIDDLE！

回答by Niclas Sahlin

You can do this with JQueryUI:

你可以用 JQueryUI 做到这一点：

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

http://jsfiddle.net/dWCbk/

http://jsfiddle.net/dWCbk/

回答by Dylan

Try this in your css:

在你的 css 中试试这个：

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