CODEWITHSUNDEEP
javascriptjquerycss
bikey77
bikey77

Reputation: 6672

JQuery and strange behavior on hover function

I'm using a hover effect for all DIVs with class="box" on a page:

Javascript:

    JQ(".box").hover(function() {
        JQ(this).nextAll(".tooltip:first").css('visibility','visible');
    });

    JQ(".box").mouseleave(function(event) {
        JQ(this).nextAll(".tooltip:first").css('visibility','hidden');
    });

It works fine in Firefox and Chrome but in IE9 and Opera the .tooltip div disappears and re-appears continuously when the mouse moves within the boundaries of the .box DIV. any ideas why the hover function keeps being called for every pixel of the DIV?

You can see a working version here

Upvotes: 2

Views: 438

Answers (3)

jfriend00
jfriend00

Reputation: 708036

When you only pass one function to .hover() that function is called when the mouse both enters and leaves. So, you're making it visible on both entering and leaving which is conflicting with your mouseleave handler.

You could just do this:

JQ(".box").hover(function() {
    JQ(this).nextAll(".tooltip:first").css('visibility','visible');
}, function() {
    JQ(this).nextAll(".tooltip:first").css('visibility','hidden');
});

Or, a little more DRY (less repeated code):

JQ.fn.nextTip = function(vis) {
    return this.nextAll(".tooltip:first").css('visibility', vis);
}

JQ(".box").hover(function() {
    JQ(this).nextTip('visible');
}, function() {
    JQ(this).nextTip('hidden');
});

Working demo: http://jsfiddle.net/jfriend00/DkgVg/

Upvotes: 3

user666
user666

Reputation: 226

Just stop execution of event functions for this jQuery object

JQ(".box").hover(function() {
    JQ(this).nextAll(".tooltip:first").stop(true,true).css('visibility','visible');
}, function(){
    JQ(this).nextAll(".tooltip:first").stop(true,true).css('visibility','hidden');
});

Upvotes: 0

boz
boz

Reputation: 4907

You should try replacing the hover part with:

JQ(".box").mouseenter(function() {
    JQ(this).nextAll(".tooltip:first").css('visibility','visible');
});

Or keep hover and do:

JQ(".box").hover(function() {
    JQ(this).nextAll(".tooltip:first").css('visibility','visible');
}, function(){
    JQ(this).nextAll(".tooltip:first").css('visibility','hidden');
});

Upvotes: 1

Related Questions