Question

我试图在鼠标悬停时更改我的背景图像，图像正在变化，但过渡是闪烁的，fadeIN / Out似乎无法正常工作......

代码：

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

Answer 2

您需要像以下一样预加载图片：

    <div id="menu"> 
  <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Categories</a></li>
        <li><a href="#">Contact</a></li>
   </ul>
  </div>

对于每一个。

或使用精灵：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/CSS_Image_Sprites。

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

2 个答案: