Javascript 背景颜色悬停淡入淡出效果 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6994665/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Background Color Hover Fade Effect CSS
提问by anupal
First, I am a beginner. I want a step by step instruction.
首先，我是初学者。我想要一步一步的指导。
I want to add a smooth background hover effect to my links in Wordpress
我想为Wordpress 中的链接添加平滑的背景悬停效果
a {
color:#000;}
a:hover {
background-color: #d1d1d1; color:#fff;
}
I want the hover on links slow, instead of instant. Do I need any JavaScript or jQuery ? If so, please tell me how to do that.
我希望链接上的悬停速度很慢，而不是即时。我需要任何 JavaScript 或 jQuery 吗？如果是这样，请告诉我该怎么做。
回答by Quentin
Since this is a cosmetic effect, it shouldn't be too vital that this fires. Given that, you might want to look at CSS 3 transformations.
由于这是一种美容效果，因此触发它应该不是太重要。鉴于此，您可能想查看 CSS 3转换。
a {
color: #000;
transition: background 0.5s linear;
}
a:hover {
background-color: #d1d1d1;
color: #fff;
}<a href="http://example.com">Hover me</a>回答by Blake Clerke
The CSS3 Transition effect would work for what you are looking for. You can find more info on how to use it here: http://www.css3.info/preview/css3-transitions/
CSS3 过渡效果可以满足您的需求。您可以在此处找到有关如何使用它的更多信息：http: //www.css3.info/preview/css3-transitions/
回答by Ariel
Note: This was written before CSS transitions were widely available (they had just come out, and browser support was insufficient). If you were doing this today then use CSS transitions, and not javascript.
注意：这是在 CSS 过渡广泛可用之前编写的（它们刚刚出现，浏览器支持不足）。如果您今天这样做，那么请使用 CSS 转换，而不是 javascript。
Yes, you need javascript. jQuery makes it easier.
是的，你需要 javascript。jQuery 使它更容易。
I'm not so sure you should be doing that as a beginner, but:
我不太确定你应该作为初学者这样做，但是：
You will need to include the jQuery library in a script tag:
您需要在脚本标签中包含 jQuery 库：
<SCRIPT type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></SCRIPT>
Then:
然后：
<SCRIPT type="text/javascript">
$(function() {
$('a').hover(
function() { $(this).animate( { backgroundColor: '#d1d1d1', color: '#fff' } ) },
function() { $(this).animate( { backgroundColor: '', color: '' } ) }
);
});
</SCRIPT>
回答by rkw
You cannot animate the background color until you use a plug-in. The plug in is designed by the same guy who created jQuery though: http://plugins.jquery.com/project/color
在使用插件之前，您无法为背景颜色设置动画。该插件是由创建 jQuery 的同一个人设计的：http: //plugins.jquery.com/project/color
He just didn't include it because it would have made the js file bigger.
他只是没有包含它，因为它会使 js 文件更大。
Note: you can change the opacity though.
注意：您可以更改不透明度。
回答by Yene Mulatu
$(document).ready(function() {
var COLOR = {
fadeBackground: function(config){
var totalStartPoint= config.startRED+config.startGREEN+config.startBLUE;
var totelEndPoint = config.endRED+config.endGREEN+config.endBLUE;
if(totalStartPoint < totelEndPoint){
var clearTime = setInterval(
function (){
//elem.css("background-color", "rgb("+color.startRED+","+color.startGREEN+","+color.startBLUE+")");
document.getElementById('jsFullAccessColor').style.background ="rgb("+config.startRED+","+config.startGREEN+","+config.startBLUE+")";
if(config.startRED < config.endRED){
config.startRED++;
}
if(config.startGREEN < config.endGREEN){
config.startGREEN++;
}
if(config.startBLUE < config.endBLUE){
config.startBLUE++;
}
if(config.startRED == config.endRED && config.startGREEN == config.endGREEN && config.startBLUE == config.endBLUE){
clearTimer(clearTime);
}
}, config.speed);
}
if(totalStartPoint > totelEndPoint){
var clearTime = setInterval(
function (){
document.getElementById(config.element).style.background ="rgb("+config.startRED+","+config.startGREEN+","+config.startBLUE+")";
if(config.startRED > config.endRED){
config.startRED--;
}
if(config.startGREEN > config.endGREEN){
config.startGREEN --;
}
if(config.startBLUE > config.endBLUE){
config.startBLUE--;
}
if(config.startRED == config.endRED && config.startGREEN == config.endGREEN && config.startBLUE == config.endBLUE){
clearTimer(clearTime);
}
}, config.speed);
}
}
}
function clearTimer(timerId){
clearInterval (timerId);
}
$(".domEleement").on("click",function (){
var config ={
//color starting point
startRED:172,
startGREEN:210,
startBLUE:247,
//color end point
endRED:255,
endGREEN:255,
endBLUE:255,
//element
element:"jsFullAccessColor",
//speed
speed:20
}
COLOR.fadeBackground(config);
});
});
