我必须根据鼠标悬停事件更改背景图片。
$("#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 和 internet explorer 上都不是(即 11 对我来说足够了)
我来了,你们有什么想法吗?
最佳答案
定义两个具有两种背景的不同 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/
测试代码
关于javascript - 网页 : background blink,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25240539/