Jquery help me analyze what happened: mouseover/mouseout ok but not hover/unhover

Question

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 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.

Answer 1

There is no "hover" event. That's just a convenience routine.

Answer 2

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.