Reputation: 2388
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
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
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
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