Question

我试图弄清楚在改变时背景颜色会褪色。但没有这样做。不确定我是否应该使用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小提琴： http://jsfiddle.net/rae0724/k3bkbpg7/2/ 它现在正在工作，但我悬停的地方并不准确。即使我没有悬停任何东西，它仍然保持显示绿色。

Answer 1

只需从:hover:before移除css部分属性，然后将其添加到a.btn:before

中

＆＃13;

.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; 
}

＆＃13;

<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>

＆＃13;

Answer 2

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');
});

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

2 个答案: