blocks|key|683086|text|现在人们使用CSS3+transitions只是因为它比messing+with+JS简单得多，浏览器支持也相当不错，而且它只是表面上的，所以即使它不能工作也没关系。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|683087|类似下面这样的代码可以完成工作：|683088|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;+}|code-block|syntax|javascript|683089|您还可以通过使用逗号分隔每个声明来转换具有不同计时和轻松函数的特定CSS属性，如下所示：|683090|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;+}|683091|Demo+here|683092|entityMap|0|LINK|mutability|MUTABLE|url|http://code.tutsplus.com/tutorials/css-fundamentals-css3-transitions--pre-10922|1|https://github.com/jquery/jquery-color|2|http://jsfiddle.net/Marcel/xejsM/52/^0|6|G|0|S|F|1|0|0|0|0|0|0|9|2|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]|$A|16|B|17|1|18]]|C|$]]|$1|D|3|E|5|6|7|19|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1A|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1B|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|1C|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1D|8|@]|9|@$A|1E|B|1F|1|1G]]|C|$]]|$1|Q|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]|10|$5|T|U|V|C|$W|11]]]]

Nowadays people are just using <a href="http://code.tutsplus.com/tutorials/css-fundamentals-css3-transitions--pre-10922" rel="noreferrer">CSS3 transitions</a> because it's a lot easier than <a href="https://github.com/jquery/jquery-color" rel="noreferrer">messing with JS</a>, browser support is reasonably good and it's merely cosmetic so it doesn't matter if it doesn't work.

Something like this gets the job done:

<pre class="lang-css prettyprint-override"><code>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; }
</code></pre>

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

<pre class="lang-css prettyprint-override"><code>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; }
</code></pre>

<a href="http://jsfiddle.net/Marcel/xejsM/52/" rel="noreferrer">Demo here</a>

blocks|key|899586|text|您可以使用JQueryUI完成此操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|899587|$('a').mouseenter(function(){
++$(this).animate({
++++color:+'#ff0000'
++},+1000);
}).mouseout(function(){
++$(this).animate({
++++color:+'#000000'
++},+1000);
});|code-block|syntax|javascript|899588|http://jsfiddle.net/dWCbk/|offset|length|899589|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|Q|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

You can do this with JQueryUI:

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

<a href="http://jsfiddle.net/dWCbk/">http://jsfiddle.net/dWCbk/</a>

blocks|key|683114|text|在你的css中试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|683115|.a+{
++++transition:+color+0.3s+ease-in-out;
}
.a+{
++++color:turquoise;
}
.a:hover+{
++++color:+#454545;
}|code-block|syntax|javascript|683116|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this in your css:

<pre><code>.a {
 transition: color 0.3s ease-in-out;
}
.a {
 color:turquoise;
}
.a:hover {
 color: #454545;
}
</code></pre>

on many sites, such as <a href="http://www.clearleft.com" rel="noreferrer">http://www.clearleft.com</a>, 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.

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

Fade Effect on Link Hover?

在许多站点上，比如，您会注意到当链接悬停在上面时，它们会淡入不同的颜色，而不是立即切换，这是默认操作。我假设JavaScript是用来创造这种效果的，有谁知道是怎么做的吗？

问Link Hover上的淡入淡出效果？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Link Hover上的淡入淡出效果？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Link Hover上的淡入淡出效果？
EN