javascript - Javascript, hover and two div's

Question

I've created a two divs

.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>

So one div becomes below another.

And then I added jQuery functions:

<script>

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

</script>

It looks like: when I hover on .image, .hover becomes above .image, then when mouse leaving .hover, it fades out.

But! If mouse leaving this area faster then .hover become visible (in my example, faster then 100 ms), mouseleave not uses - because there is no .hover, so .hover stays over .image. How can i fix it?

Thanks for each answer!

Answer 1

这将是最容易实现的 CSS 过渡。

http://jsfiddle.net/eS3NS/

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

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