Jquery - live('hover') and mousemove

Question

Hi, i have a little problem with the hover funtion with mousemove. But what is wrong?

working example -> http://www.jsfiddle.net/V9Euk/306/

$('.tip').live('hover', function(e)
{

    if (e.type == 'mouseover')
    {
      $('#'+this.id+' .tooltip').show();
    }

    if (e.type == 'mousemove')
    {
        alert('move');
         $('#'+this.id+' .tooltip').css({ left: e.pageX + 20, top: e.pageY + 20});
    }

    if (e.type == 'mouseout')
    {
        $('.tooltip').hide();
    }

});

Thanks in advance! Peter

Answer 1

The problem is that hover() maps to mouseover and `mouseleave), not the events you're using.

$("...").live("hover", function(e) {
  ...
});

is equivalent to:

$("...").live("mouseover mouseleave", function(e) {
  ...
});

If you want the mousemove event too you can use:

$("...").live("hover mousemove", function(e) {
  ...
});

Answer 2

There is no hover event - you need to instead include all three events which you used, like this:

$('.tip').live('mouseout mousemove mouseover', function(e)

See the jQuery documentations example on multiple events in live():

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

Answer 3

Hah! You deleted the same question before, RIGHT after I was going to click Post Answer.

.hover() will never return mousemove, it will only return mouseenter/mouseleave.

You should directly bind to the mousemove event, using

$('.tip').live('mousemove', function(e) {
    // do stuff here
});