CSS 过渡不会缓和

Question

SO上有很多关于这个问题的问题，但没有一个可以帮助我。

我正在尝试根据按钮悬停轻松进出背景图像。这是小提琴

HTML:
<div class="bg bg-home"></div>
<div class="main-menu" id="home">
  <a href="#">Home</a>
</div>
JS:
$('#home').hover(function() {
    $('.bg.bg-home').addClass('home-main-menu');
},function() {
    $('.bg.bg-home').removeClass('home-main-menu');
});
CSS:
html,body {
    height: 100%;
}
.bg {
  -webkit-transition: all 1s;
  transition: all 1s;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
}
.bg-home {
    position:absolute;
    left:0;
    top:0;
    z-index: -1; 
    width: 100%;
    height: 100%;
}
.home-main-menu {
  background: url("http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2013/1/11/1357921737290/Masterclass-in-HTML5-and--006.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
}

问题是背景图像缓和得很好，但不会缓和。我也尝试只在不透明度上进行过渡，但结果相同。

有人可以解释我做错了什么吗？

提前谢谢你。

Answer 1

您可以将背景图像切换到 .bg-home 本身。然后，悬停时添加的类只需要影响不透明度，您将有一个平滑的缓和。

看到这个小提琴：https://jsfiddle.net/Ltv58jmh/2/

.bg-home {
    position:absolute;
    left:0;
    top:0;
    z-index: -1; 
    width: 100%;
    height: 100%;
    background: url("http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2013/1/11/1357921737290/Masterclass-in-HTML5-and--006.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity:0;
}
.home-main-menu {
    opacity: 1;
}