CODEWITHSUNDEEP
jquery
tim
tim

Reputation: 1369

jquery showing elements on hover

I have a number of divs(myDiv) on a page. When the user hovers over one of the divs I would like to: after a little delay, display another div(myPop) on top. Almost like a tooltip. The code below is just not quite doing it. If the user moves the mouse across a number of myDivs then you can wait and see all the myPops fadein. I really want to just completely hide all the myPops that the user previously caused to be fadeIn. Because you end up with sort of trailing effect of all these myPops being displayed.

   $(".myDiv").hover(function () {
    $(this).find(".myPop").fadeIn('slow');
}, function () {
    $(this).find(".myPop").fadeOut('fast');
}
});

Upvotes: 0

Views: 207

Answers (2)

Cokegod
Cokegod

Reputation: 8424

You have a syntax error, you have an extra } for the second function, this should work:

$(".myDiv").hover(function () {
    $(this).find(".myPop").fadeIn('slow');
}, function () {
    $(this).find(".myPop").fadeOut('fast');
});

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816232

Try:

$(".myDiv").hover(function () {
    $(".myPop").stop();
    $(this).find(".myPop").fadeIn('slow');
}, function () {
    $(this).find(".myPop").fadeOut('fast');
});

Upvotes: 2

Related Questions