Jquery help me analyze what happened: mouseover/mouseout ok but not hover/unhover
I've been working on some code where I trigger the code on hover/unhover
. Then I decided to trigger the same code also on focus/blur
. Usually with hover/unhover
only, I go for the usual hover comma no unhover
format. But this time since I was trying to add focus/blur
, I had to use bind and use this.bind
with the second part too, like this:
$.fn.gogogo = function (msg) {
$(this).bind("hover focus", function(){
$("#screen").html(msg).show();
});
$(this).bind("unhover blur", function(){
$("#screen").html("").hide();
});
}
The problem was that no matter what I did, hover/unhover
didn't take. I had to revert back to mouseover/mouseout
like this. The 开发者_JAVA百科code is identical except for the words hover/unhover
vs. mouseover/mouseout
$.fn.gogogo = function (msg) {
$(this).bind("mouseover focus", function(){
$("#screen").html(msg).show();
});
$(this).bind("mouseout blur", function(){
$("#screen").html("").hide();
});
}
I thought hover/unhover was just the jquery abstraction of mouseover/mouseout. How come the behavior is different here: hover/unhover
breaks my code, while mouseover/mouseout
is ok?
thanks.
There is no event called hover
.
The hover
method is a convenience method that binds event handler to the mouseenter
and mouseleave
events.
If you open the jQuery source, you'll see that the hover
method is defined like this:
hover: function(fnOver, fnOut) {
return this.mouseenter(fnOver).mouseleave(fnOut);
},
You should bind to the mouseenter
and mouseleave
events instead.
EDIT: The difference between mouseenter
and mouseover
is that mouseenter
(and mouseleave
) don't bubble. This means that you'll get a mouseover
event if the mouse moves into any element inside the one you bound to (which is probably not what you want), whereas you'll only get a mouseenter
event if the mouse entered that element itself. For an example, see the documentation.
There is no "hover" event. That's just a convenience routine.
精彩评论