Question

我有一个div有一些内容，然后在悬停我试图FadeIn另一个跨越它同时fadding出容器div。悬停后容器div的问题转到opacity 0然后返回到我设置的值。感觉就像眨眼一样。我需要顺利这是我的代码：

Live JSFiddle：http://jsfiddle.net/alok108/Y7hgs/28/

HTML

<div class="campaign-box">
    <a href="#"class="like-box"> 
        <div class="box">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            <span>34234983-80</span>
        </div>    
        <span> </span>
    </a>
</div>

的jQuery

$(function () {
    $(".campaign-box span:last").hide();
    $(".campaign-box").hover(function () { 
        $(".box").css("opacity", 0.5);
        $(".campaign-box span:last").fadeIn("fast");           
    }, function () {        
        $(".box").css("opacity", 1); 
        $(".campaign-box span:last").fadeOut("slow");
    });
});

CSS

.campaign-box {
    display: block;
    height: 100px;
    width: 200px;
    border: solid black;
}
.box {
    display:block;
    height:100%;
    width:100%;
    float:left;
}
.box + span {
    display: block;
    height:100%;
    width:100%;
    background: #f1f1f1 url("http://0.tqn.com/d/personalweb/1/G/w/O/FacebookLikeButton1.jpg") no-repeat;
    z-index:5;
}

Answer 1

只需添加位置：相对;除非设置了静态以外的某种位置，否则z-index不会做任何事情。

.box + span {
    display: block;
    height:100%;
    width:100%;
    position: relative;
    background: #f1f1f1 url("http://0.tqn.com/d/personalweb/1/G/w/O/FacebookLikeButton1.jpg") no-repeat;
    z-index:5;
}

jQuery - 粗略淡入淡出过渡

1 个答案: