的Javascript，懸停和兩個div的

Question

我創建了一個兩個div

.video .image, .video .hover { 
    width: 315px; 
    height: 125px; 
    position: absolute; 
    top: 0; } 

.video .hover { 
    z-index:10; 
    display:none; } 

    <div class="left"> 
    <div class="image"> 
     <a href="..."><img src="..." height="125" width="315" /></a> 
    </div> 
    <div class="hover"> 
     <a href="..."><img src="..." height="125" width="315" alt="Left"></a> 
    </div> 
    </div> 

所以一個DIV變得低於另一個。

然後我加入jQuery函數：

<script> 

jQuery(".image").mouseenter(function(){ 
jQuery(this).parent().find(".hover").fadeIn(100); 
    jQuery(".hover").mouseleave(function(){ 
    jQuery(this).parent().find(".hover").fadeOut(100);}); 
}); 

</script> 

它看起來像：當我將鼠標懸停在.image，.hover成爲上述.image，則當鼠標離開.hover，它淡出。

但是！如果鼠標離開這個區域更快然後.hover變得可見（在我的例子中，更快然後100毫秒），mouseleave不使用 - 因爲沒有.hover，所以.hover停留在.image以上。我該如何解決它？

感謝您的每一個答案！

Answer 1

這對於CSS轉換最容易完成。

http://jsfiddle.net/eS3NS/

.video .hover { 
    z-index:10; 
    opacity: 0; 
    transition: opacity .1s; 
} 

.video:hover .hover { 
    opacity: 1; 
}