Question

我必须根据鼠标悬停事件更改背景图像。

$("#videoLanceur").mouseenter(function() {
    $("body#homebg").css("background-image", "url(img/home-labtop-clean-playerhovered.jpg)");
})
$("#videoLanceur").mouseleave(function() {
    $("body#homebg").css("background-image", "url(img/home-labtop-clean-player.jpg)");
})

它工作正常，但是......在第一个鼠标悬停时，背景闪烁。我猜这是因为它必须加载图像。

所以我决定预先加载图像。

HTML :
<div id="hiddenPreloadedBgImage">
  <img src="img/home-labtop-clean-playerhovered.jpg" />
</div>

CSS :
#hiddenPreloadedBgImage {
    visibility: hidden;
    position: absolute;
    left: -500%;
    top: -500%;
}

我很开心，它在Chrome上工作得很好，但在Firefox浏览器上也没有用（或者11对我来说足够了）

所以我在这里，如果你们有任何想法？

Answer 1

<强> Demo

编辑：在以下评论之后添加转换。

为什么不将css仅用于transition？

CSS

#test {
   background-image: url('http://www.osmobot.com/wp-content/uploads/2013/10/1379369265_Google_2.png');
   height: 100px;
   width: 120px;
    transition: all 0.1s;
}

#test:hover {
   background-image: url('http://www.truckcentrewa.com.au/wp-content/uploads/2014/02/Google+-150x150.png');
}

Answer 2

定义两个具有两种背景的不同Div：

<div id="id1">
 <img src="http://www.osmobot.com/wp-content/uploads/2013/10/1379369265_Google_2.png" />
</div>

<div id="id2">
  <img src="http://www.truckcentrewa.com.au/wp-content/uploads/2014/02/Google+-150x150.png" />
</div>

将一个css设置为隐藏，一个设置为可见：

#id1 {
 display:none;
 position: absolute;
}
#id2 {
 display:block;
 position: absolute;

}

#id1 img{
 width:300px;
 height:300px;
}

#id2 img{
 width:300px;
 height:300px;
}

并显示一个删除其他：

jQuery("#id1").mouseenter(function() {
  jQuery("#id1").css("display","none");
  jQuery("#id2").css("display","block");
});

jQuery("#id2").mouseleave(function() {
  jQuery("#id2").css("display","none");
  jQuery("#id1").css("display","block");
});

修改：http://jsfiddle.net/9afmxxad/

经过测试的代码

网：背景眨眼

2 个答案: