CODEWITHSUNDEEP
javascriptjqueryhtmlcssmouseevent
Sks
Sks

Reputation: 610

How to Show/Hide div when hovering to any Link

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

Upvotes: 2

Views: 101

Answers (3)

S&#233;rgio S. Filho
S&#233;rgio S. Filho

Reputation: 374

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

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

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

Upvotes: 2

Kiran
Kiran

Reputation: 20313

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

Upvotes: 3

user3446496
user3446496

Reputation: 361

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.

Upvotes: 0

Related Questions