CODEWITHSUNDEEP
jquerycss
user3443238
user3443238

Reputation:

DIV on top of DIV on hover without blinking

I am trying to achieve a hover effect like in this example http://usepanda.com/app/ I want to be able to add info on the div once hovered just like they did

Here is what I tried: http://jsfiddle.net/ynUKx/584/

<div class="hover"></div>
<div class="fade" style="display:none"></div>

CSS:

   .hover{
    width:40px;
    height:40px;
    background:yellow;
}
.fade{
    position:absolute;
    top:0px;
    width:40px;
    height:40px;
    background:black;    
}

Jquery:

$(document).ready(function(){    
    $("div.hover").hover(
      function () {
        $("div.fade").fadeIn();
      }, 
      function () {
        $("div.fade").fadeOut();
      }
    );
});

Upvotes: 2

Views: 151

Answers (5)

Pradeep Pansari
Pradeep Pansari

Reputation: 1297

You can try below code:

Working Fiddle here

$(document).ready(function(){    
  $("div.hover").mouseover(
     function () {
      $("div.fade").fadeIn();
     }); 
      $("div.fade").mouseout( function () {
        $(this).fadeOut();
      }
   );
});

Upvotes: 1

nandu
nandu

Reputation: 779

Here's something for starter http://jsfiddle.net/ynUKx/587/

The idea was after the div.fade got loaded, the movement of the mouse would trigger the mouseleave of the div.hover. All you needed to just write a mouseover for the div.hover and a mouseout for div.fade.

And ofcourse a little opacity would do the trick you require

Upvotes: 0

Neeraj
Neeraj

Reputation: 197

try this

$(document).ready(function(){    
    $(".hover").mouseover(function () {
        $(this).hide();
        $('.fade').show();
      }
    );
    $(".fade").mouseout(function () {
        $(this).hide();
        $('.hover').show();
      }
    );
});

Upvotes: 0

Asif
Asif

Reputation: 647

try thiis

$(document).ready(function(){    
$('.hover').mouseover(
    function(){
        $(this).fadeOut();
        $('.fade').fadeIn();
    }
)
$('.fade').mouseout(
    function(){
        $(this).fadeOut();
        $('.hover').fadeIn();
    }
)
});

http://jsfiddle.net/ynUKx/586/

Upvotes: 0

emn178
emn178

Reputation: 1492

Is this what you want?

<div class="hover">
  <div class="fade" style="display:none"></div>
</div>

Upvotes: 0

Related Questions