悬停页面背景更改颜色淡入效果（css或jQuery）_Css_Css Transitions_Background Color

悬停页面背景更改颜色淡入效果（css或jQuery）

css

悬停页面背景更改颜色淡入效果（css或jQuery）,css,css-transitions,background-color,Css,Css Transitions,Background Color,我试着想办法让背景色在改变时褪色。但没有做到这一点。不确定我应该使用css还是jQuery。请看一看，谢谢 .wrapper{ 宽度：100%； } 左上校， .右上校{ 宽度：50%；浮动：左； } a、 btn{ 背景：#fff；显示：内联块； } a、 btn：之前{ 背景色：透明；过渡：所有0.5s缓解； -webkit过渡：所有0.5s轻松； -moz过渡：所有0.5s轻松； -ms过渡：所有0.5s轻松； -o型过渡：所有0.5s的轻松度； } a、 btn：悬停：之前{ 内

我试着想办法让背景色在改变时褪色。但没有做到这一点。不确定我应该使用css还是jQuery。请看一看，谢谢

.wrapper{
宽度：100%；
}
左上校，
.右上校{
宽度：50%；
浮动：左；
}
a、 btn{
背景：#fff；
显示：内联块；
}
a、 btn：之前{
背景色：透明；
过渡：所有0.5s缓解；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-ms过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
}
a、 btn：悬停：之前{
内容：''；
位置：固定；
显示：块；
排名：0；
底部：0；
左：0；
右：0；
z指数：-1；
}
a、 btn.btn-1:悬停：在{
背景色：红色；
}
a、 btn.btn-2:悬停：在{
背景颜色：绿色；
}

只需从

：hover:before

中删除css的某些属性，并将其添加到

a.btn:before

.wrapper{
宽度：100%；
}
左上校，
.右上校{
宽度：50%；
浮动：左；
}
a、 btn{
背景：#fff；
显示：内联块；
}
a、 btn：之前{
背景色：透明；
过渡：背景色0.5s，不透明度；
内容：''；
排名：0；
底部：0；
左：0；
右：0；
z指数：-1；
不透明度：0；
}
a、 btn：悬停：之前{
位置：固定；
过渡：背景色0.5s，不透明度；
不透明度：1；
}
a、 btn.btn-1:悬停：在{
背景色：红色；
}			
a、 btn.btn-2:悬停：在{
背景颜色：绿色；
}

背景色是CSS可转换/可设置动画的属性

我所做的只是设置了转换，并使用JQuery添加/删除了一些导致元素背景颜色改变的类

请在此处查看我的代码笔：

HTML:

JS:

它现在正在工作，但我悬停的位置不准确。它一直显示绿色，即使我什么都没有盘旋。我非常高兴！：）

<body>
  <h1>Mouse over a color</h1>
  </br>
  <div class="blue">Blue</div>
  <div class="green">Green</div>
</body>

body{
  background-color: red;
  transition: background-color 4s;
}

.blue,body.blue{
  background-color: blue;
}

.green,body.green{
  background-color: green;
}

$('.blue').hover(function(){
  $('body').addClass('blue');
}, function(){
  $('body').removeClass('blue');
});

$('.green').hover(function(){
  $('body').addClass('green');
}, function(){
  $('body').removeClass('green');
});