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

This would be easiest to accomplish with CSS transitions.

http://jsfiddle.net/eS3NS/

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

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