CODEWITHSUNDEEP
javascriptjquery
dhaval
dhaval

Reputation: 2388

mouseenter leave cause flicker in jQuery

The below code works but on mouse enter causes flicker 

        $("#helptext").bind("mouseenter",function(){
            $("p:first",this).text("helptext.");
          }).bind("mouseleave",function(){
            $("p:first",this).text("");
          });

The below code does not work 

        /*
        $("helptext").mouseout(function(){
            $("p:first",this).text("sdlfksdlfjskldjl");
          }).mouseover(function(){
            $("p:first",this).text("mouse over");
          });*/

I want to remove the flicker or get the second code working.

The HTML for above 

<div id="helptext"><img  alt="Help Text" src="/static/help.png"></img><p></p></div>

Upvotes: 1

Views: 1682

Answers (3)

Sanket Shah
Sanket Shah

Reputation: 11

I think it could be the issue with hover in JQuery version you are using. I am facing the issue of multiple calls for hover when the mouse enters bound element's children.

Check out the following.

http://bugs.jquery.com/ticket/5821

Upvotes: 1

jitter
jitter

Reputation: 54625

I suggest using hover() this instead of binding to mouseenter and mouseleave looks cleaner to me.

$("#helptext").hover(function(){
    $("p:first",this).text("helptext text.");
  }, function(){
    $("p:first",this).text("");
  }
);

Btw. I guess without more of your HTML/CSS code I think we can't solve this issue as the above doesn't flicker for me at all.

Check here http://jsbin.com/ihuna/

Upvotes: 1

Nikolas Stephan
Nikolas Stephan

Reputation: 1290

This may be kind of obvious, but isn't the piece of code that isn't working missing a # in the first line? Seems like it should be:

$("#helptext").mouseout(function(){
    $("p:first",this).text("sdlfksdlfjskldjl");
}).mouseover(function(){
    $("p:first",this).text("mouse over");
});

Upvotes: 1

Related Questions