如何在带有背景图像的悬停上应用淡入淡出？答案

【问题标题】：How to Apply FadeIn on Hover with Background img?如何在带有背景图像的悬停上应用淡入淡出？
【发布时间】：2012-03-02 18:10:58
【问题描述】：

我已经在几个应用程序中使用了这个 jquery，这些应用程序基本上是用淡入淡出的过渡进行 img 交换。超级简单

$(document).ready(function() {
    $("img.a").hover(
    function() {
        $(this).stop().animate({
            "opacity": "0"
        }, "fast");
    }, function() {
        $(this).stop().animate({
            "opacity": "1"
        }, "fast");
    });

});

用 HTML 标记这个

<div id="leftBox" class="fadehover inline">
        <img src="images/leftTop.jpg" alt="" class="a" />
        <img src="images/leftBot.jpg" alt="" class="b" />
    </div>

CSS

/*fadeHover*/
div.fadehover {
    position: relative;
    }

img.a {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
        }

img.b {
    position: absolute;
    left: 0;
    top: 0;
    }

我想知道这是否可以应用于背景图像？

我正在尝试在样式标签中做到这一点，但没有任何运气。

谢谢

【问题讨论】：

标签： jquery css hover fade

【解决方案1】：

我不一定会按照您的方式进行操作，但可以通过同时为另一张图像设置动画来实现。根据您的 html，应该这样做：

$("img.a").hover(
    function() {
        $(this).stop().animate({"opacity": "0"}, "fast");
        $("img.b").animate({"opacity": "1"}, "fast");
    },
    function() {
        $(this).stop().animate({"opacity": "1"}, "fast");
        $("img.b").animate({"opacity": "0"}, "fast");
    }
);

jsFiddle example.

【讨论】：

【解决方案2】：

是的，这是可能的。您的 JS 代码也适用于该场景。只需要稍微修改一下 img.a css 类。

img.a {
        display: block;
        background: url('your-image') no-repeat bottom left;
        padding: 0 0px 32px 200px;
}

请注意，padding 属性在这里起着至关重要的作用，在正确设置它之前，您应该知道背景图像的高度和宽度，否则图像将无法完全可见。

演示：http://jsfiddle.net/V7wB6/

【讨论】：

【解决方案3】：

我最终这样做了

$(document).ready(function(){
$('#home').mouseenter(function(){
$('.home_hover').fadeIn();
});

$('#home').mouseleave(function(){
$('.home_hover').fadeOut();
});
});

<div id="home">
<div class="home_normal">Home</div>
<div class="home_hover">Home</div>
</div>

使用 CSS

#home{
    position:relative;
    float: left;
    height: 25px;
    width: 88px;
    padding-top: 12px;
}
.home_normal{
    position:absolute;
    height: 25px;
    width: 88px;
    left: 0px;
    top: 0px;
    padding-top: 12px;
}
.home_hover{
    background-image:url(../images/menuBG-1.0.jpg);
    height: 25px;
    width: 88px;
    position:absolute;
    display: none;
    left: 0px;
    top: 0px;
    padding-top: 12px;
}

【讨论】：