cannot use .bind() to bind hover

Question

I experimenting with jQuery. As I was trying I found out that I can\'t use hover event with .bind. And I don\'t know what is wrong.

$(document).ready(function()         


        

Answer 1

You need to use the mouseenter and mouseleave events (which .hover() uses) directly when binding with an object like this:

$(document).ready(function(){
 $('.some-class').bind({
  mouseenter: function(e) {
  // Hover event handler
   alert("hover");
  },
  mouseleave: function(e) {
  // Hover event handler
   alert("hover");
  },
  click: function(e) {
  // Click event handler
   alert("click");
  },
  blur: function(e) {
  // Blur event handler
  }
 });
});

.hover() is defined specially here in the jQuery event code...it simply isn't supported like other events in places like .bind(), since it's not an event, it's just a function to help you bind the mouseenter and mouseleave events.

Answer 2

Not much of a why, but it is simply not in the spec. Check the doc - hover is not listed in the bindable events.

http://api.jquery.com/bind/