Question

寻找在特定元素悬停时在两个背景图像之间平滑过渡的方法？我已经尝试过我能想到的一切。

bg图像样式为：

padding: 0
margin: 0
border: 0
background: #232930 url(../inc/alfaExt.jpg) 0 0 fixed
-webkit-background-size: cover
-moz-background-size: cover
-o-background-size: cover
background-size: cover
background-repeat: no-repeat
transition: background .3s

这是Js：

$('.siteButton').hover(function(){
    $('body').css({'background': '#232930 url(../inc/' + this.id +   'Ext.jpg)'});
});

当我快速切换元素时，浏览器会一直闪烁白色。我删除了转换并将图像预加载到浏览器缓存中，没有运气。

我知道精灵/位置解决方案，但我需要这些图像完全填充身体而不重复。我用精灵做的每一项测试都没有成功。

Answer 1

您可以将动画添加到图片处理中，尝试

$('.siteButton').hover(function(){
$('body').css({'background': '#232930 url(../inc/' + this.id +   'Ext.jpg)'}).fadeIn(200);

}）;

在悬停时更改背景图像时，防止浏览器闪烁

1 个答案: