悬停页面背景改变颜色渐变效果（css或jQuery）答案

【问题标题】：Hover page background change color fade effect (css or jQuery)悬停页面背景改变颜色渐变效果（css或jQuery）
【发布时间】：2016-10-12 04:26:13
【问题描述】：

我试图弄清楚在更改时让背景颜色褪色。但做不到。不确定我应该使用 css 还是 jQuery。请看一下，谢谢。

.wrapper {
  width: 100%;
}

.left-col,
.right-col {
  width: 50%;
  float: left;
}

a.btn {
  background: #fff;
  display: inline-block;
}

a.btn:before {
  background-color: transparent;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}

a.btn:hover:before {
  content: '';
  position: fixed;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

a.btn.btn-1:hover:before {
  background-color: red;
}

a.btn.btn-2:hover:before {
  background-color: green;
}

<div class="wrapper">
  <div class="left-col">
    <a href="#" class="btn btn-1">Button 1</a>
  </div>
  <div class="right-col">
    <a href="#" class="btn btn-2">Button 2</a>
  </div>
</div>

在此处更新 jquery fiddle： http://jsfiddle.net/rae0724/k3bkbpg7/2/ 它现在可以工作，但是我悬停的位置不准确。即使我没有悬停任何东西，它也会一直显示绿色。

【问题讨论】：

标签： css css-transitions background-color

【解决方案1】：

background-color 是一个 CSS 可转换/动画属性。

我所做的只是设置过渡，并使用 JQuery 添加/删除一些导致该元素的背景颜色发生变化的类。

在这里查看我的 CodePen： http://codepen.io/jarodsmk/pen/EyAOdN

HTML：

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

CSS：

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

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

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

JS：

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

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

【讨论】：

我非常高兴！ :)

【解决方案2】：

只需从 :hover:before 中删除一些 css 属性并将其添加到 a.btn:before

.wrapper {
  width: 100%;
}

.left-col,
.right-col {
  width: 50%;
  float: left;
}

a.btn {
  background: #fff;
  display: inline-block;
}

a.btn:before {
  background-color:transparent;
  transition: background-color 0.5s ease,opacity;
  content: '';
  top:0;
  bottom:0;
  left:0;
  right:0; 
  z-index:-1;
  opacity:0; 
}
a.btn:hover:before {
  position:fixed;
  transition: background-color 0.5s ease ,opacity;
  opacity:1; 
}
a.btn.btn-1:hover:before {
  background-color:red;
}			
a.btn.btn-2:hover:before {
  background-color:green; 
}

<div class="wrapper">
  <div class="left-col">
    <a href="#" class="btn btn-1">Button 1</a>
  </div>
  <div class="right-col">
    <a href="#" class="btn btn-2">Button 2</a>
  </div>
</div>

【讨论】：

jsfiddle.net/rae0724/k3bkbpg7/2 它现在可以工作，但我悬停的位置不准确。即使我没有悬停任何东西，它也会一直显示绿色。