jQuery的 - 懸停

Question

粗糙淡入過渡我有一些內容的DIV，然後懸停我想淡入另一跨度它，而fadding出來的div容器。 容器DIV變爲混濁0，則懸停後問題回到我所設置的值。感覺就像閃爍。 我需要平穩。
這裏是我的代碼：

直播的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; 
}