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;
}