背景图像闪烁鼠标悬停

问题描述：

我试图改变鼠标悬停我的背景图片，图像变化，但该过渡闪烁和淡入/输出似乎不工作...背景图像闪烁鼠标悬停

代码：

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)'); 
});

的闪烁可能会在加载图像，你是拉起来，当鼠标悬停已经发生了可以发生，因为滞后。尝试预加载它们。 – Patel

答

你需要预装图像如：

<img src="test.png" style="display:none">

对于每一个。

或者使用精灵：

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

你也可以尝试遏制或反弹事件流。 underscore.js等等，有一些方便的方法可以提供帮助。 –

谢谢你的回答。但它仍然闪烁。它的全屏背景和背景应该改变每个链接悬停与不同的图像。 – Dennis

预加载后它真的闪烁吗？嗯，你可以做一个http://jsfiddle.net？ – loveNoHate

答

尝试利用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>

背景图像闪烁鼠标悬停

相关推荐