mouseenter leave cause flicker in jQuery

Question

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>

Answer 1

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

Answer 2

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/