jquery - 背景图像在鼠标悬停时闪烁

Question

我试图在鼠标悬停时更改我的背景图像，图像在变化，但过渡闪烁，淡入/淡出似乎不起作用......

代码:

CSS:

.background {
    position: fixed;
    top:100px;
    width: 100%;
    height: 100%;
    background: url(../img/angst.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

js:

$( ".project_link_01" )
  .mouseover(function() {
    $('.background').css('backgroundImage','url(../img/test.png)').fadeIn();
  })
  .mouseout(function() {
    $('.background').css('backgroundImage','url(../img/angst.png)');
});

Answer 1

尝试利用 css :hover

.background {
  position: fixed;
  top: 100px;
  width: 100%;
  height: 100%;
  background: url(http://lorempixel.com/50/50/nature) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  transition: background 500ms;
}
.background:hover {
  background: url(http://lorempixel.com/50/50/technics) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

<img src="http://lorempixel.com/50/50/technics" style="display:none;" />
<div class="background"></div>