CODEWITHSUNDEEP
javascriptjqueryhtmlhovermouseevent
Igor
Igor

Reputation: 178

Javascript, hover and two div's

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!

Upvotes: 0

Views: 134

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191729

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

Upvotes: 1

Related Questions