Link Hover上的淡入淡出效果？
Link Hover上的淡入淡出效果？
提问于 2011-05-15 20:18:36
在许多站点上，比如http://www.clearleft.com，您会注意到当链接悬停在上面时，它们会淡入不同的颜色，而不是立即切换，这是默认操作。
我假设JavaScript是用来创造这种效果的，有谁知道是怎么做的吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-05-15 20:37:27
现在人们使用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; }Stack Overflow用户
发布于 2011-05-15 20:39:00
您可以使用JQueryUI完成此操作：
$('a').mouseenter(function(){
$(this).animate({
color: '#ff0000'
}, 1000);
}).mouseout(function(){
$(this).animate({
color: '#000000'
}, 1000);
});Stack Overflow用户
发布于 2015-11-12 02:05:02
在你的css中试试这个：
.a {
transition: color 0.3s ease-in-out;
}
.a {
color:turquoise;
}
.a:hover {
color: #454545;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6008324
复制相关文章
相似问题