How to Show/Hide div when hovering to any Link

Question

I am facing one small Issue in displaying/hiding any div on hovering any anchor tag.

Currently I tried with Mouseenter and MouseLeave functions but Its not smooth.

Clickable Link:<a class="clickmeToSeeDiv" href="##"></a>

JS code:

    $('.clickmeToSeeDiv').live("mouseenter",function(){
        $('.leftborderActive').show();
    });
    $('.clickmeToSeeDiv').live("mouseleave",function(){
        $('.leftborderActive').hide();          

    });

Above code sometime works sometimes not. Please suggest if you all have any Idea or a better solution.

Thanks Sham

You have answer here [http://stackoverflow.com/questions/5210033/show-div-on-hover-with-only-css][1] with only css. [1]: http://stackoverflow.com/questions/5210033/show-div-on-hover-with-only-css — Zivko, Mar 25 '14 at 17:39

Kiran · Answer 1 · 2014-03-25T17:42:39.333

live event is deprecated, use .on() instead (Attach an event handler function for one or more events to the selected elements).

Try this:

$(document).ready(function(){
    $(".leftborderActive").hide(); // hide div on DOM ready
    $( ".clickmeToSeeDiv" ).mouseenter(function() { // anchor mouseover event
        $(".leftborderActive").show(); // show div
    }).mouseleave(function() { //anchor mouseleave event
        $(".leftborderActive").hide(); //hide div
    });
});

DEMO

or

$(document).ready(function(){
     $(".leftborderActive").hide();
    $(document).on('mouseenter mouseleave','.clickmeToSeeDiv',function(){
        $('.leftborderActive').toggle();
    });
});

He should use `on` even if it is not delegated (just sayin'). — Karl-André Gagnon, Mar 25 '14 at 17:43

Sérgio S. Filho · Answer 2 · 2014-03-25T17:51:51.280

2

the method 'live' is deprecated, use 'on' instead.

$(document).on('mouseenter mouseleave', '.clickToSeeDiv', OnDivClick);

function OnDivClick(){
    $('.clickToSeeDiv').toggle();
}

edited Mar 25 '14 at 17:51

answered Mar 25 '14 at 17:41

Sérgio S. Filho

364
1
4
13

score 0 · Answer 3 · answered Mar 25 '14 at 17:39

You could try JQuery's animate functions or set a timer on the show and hide methods so that they make the div operate a little more smoothely.

Also, make sure to cancel any previous events when you call the enter or leave methods so that the animations don't stack.

How to Show/Hide div when hovering to any Link

3 Answers3