Question

我很想知道并且四处寻找并找不到答案。现在我正在使用jQuery在悬停时更改背景图像。是否可以在其中添加过渡时间？像褪色？ ie8兼容？

以下是代码：

$('.logo').hover(function() {
    $(this).css("background","url('url') no-repeat"); 
},function() {
    $(this).css("background","url('url_hover') no-repeat"); 
});

Answer 1

由于背景图像源不是渐变的属性，因此可能会在所有元素后面放置两个模拟背景，并在悬停时淡出一个以显示其背后的一个。

你可以这样做 - jsFiddle Demo

HTML

<div class="bgFadeToggle">
    <h1>Hello World</h1>
    <div class="bg"><img src="image-1.jpg" /></div>
    <div class="bg"><img src="image-2.jpg" /></div>
</div>

JS

$('.bgFadeToggle').hover(function(){
    $(this).find('.bg:first').stop(true).fadeToggle();
});

CSS

.bgFadeToggle {
    position: relative;
    z-index: 9999;
}

.bgFadeToggle .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bgFadeToggle .bg  {
    z-index: -9998;
}

.bgFadeToggle .bg + .bg {
    z-index: -9999;
}

jQuery悬停与背景图像转换/缓解效果

1 个答案: