Whats wrong with this piece of jQuery code?

Question

I have just discovered live events in jQuery.

I am trying it out. I have written a little snippet to bind the mouse hovering over submit buttons in a form:

jQuery("form img.submit_btn").live('hover', function(){
    (
      function () {
        jQuery(this).css('cursor','pointer');
      },
      function () {
        jQuery(this).css('cursor','auto');
      }
    );
});

However, it has no effect. Have I missed something?

[Edit]

It has just been brought to my attention that this behavior can be trivially implemeted using CSS. Perhaps then, the example I gave above is too simple. However, the underlying question still is how to use the 'live' call to bind hover events (so I can do something more complicated -e.g. animation etc, which cannot be done using CSS alone)

Answer 1

You could do that with:

$('form img.submit_btn').mouseover(function() {
    jQuery(this).css('cursor','pointer');
});
$('form img.submit_btn').mouseout(function() {
    jQuery(this).css('cursor','auto');
});

OR

$('form img.submit_btn').mouseover(function() {
    jQuery(this).css('cursor','pointer');
  }).mouseout(function(){
    jQuery(this).css('cursor','auto');
});

Best of luck

Answer 2

This seems a little redundant, just use CSS to define the hover state to use a pointer cursor rather than hand.

form img.submit_btn:hover {
   cursor: default;
}

Answer 3

I believe .live() is more like .bind() than it is like the event methods. So, the problem here is twofold. First off, the above seems to expect the function passed as the event handler to return the two functions you list as a result of the function, but it won't work. You need a return keyword for that.

More importantly, if you pass hover to live, you have to basically do a forking event handler. From the jQuery example:

$('.hoverme').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    // do something on mouseover
  } else {
    // do something on mouseout
  }
});

jQuery 1.4.1 makes 'hover' map to 'mouseenter mouseleave', so you would do:

$('.hoverme').live('hover', function(event) {
  if (event.type == 'mouseenter') {
    $(this).css('cursor','pointer');
  } else {
    $(this).css('cursor','auto');
  }
});

That's for something more complicated, though. I agree with Lazarus that CSS is the way to go for just changing the pointer; I'm just assuming you wanted to do something more interesting and this was just an experiment.