JQuery: Update hover on mouse movement

$(document).ready(function() {
  $(".hoverimage").hover(
    function(e) { openQuicktip(this,e); },
    function() { closeQuicktip(this); }
  开发者_运维问答);

  $("area").hover(
    function(e) { openQuicktip(this,e); },
    function() { closeQuicktip(this); }
  );
});

function openQuicktip(elem,e) {
  ar x = e.pageX;
  ar y = e.pageY;

  $('.helpbox').fadeIn('fast');
  $('.helpbox').css('top', y).css('left', x);
  $('.helpbox .desc').html($(elem).attr('alt'));
}

function closeQuicktip($elem) {
  $('.helpbox').fadeOut('fast');
}

This is my jQuery, how do I make it "change" the coords each time i move the mouse?

Using mousemove event.

$("area").mousemove(function(e) {
    x = e.pageX;
    y = e.pageY;
    $('.helpbox').css('top', y).css('left', x);
});

Also might consider adding a global variable that holds the open/close state of the QuickTip. And only update .helpbox if QuickTip is open.

..fredrik

Ended up with this:

$(document).ready(function() {
    $("area, .hoverimage").mousemove(function(e) {
        openQuicktip(this, e);
    });
    $("area, .hoverimage").mouseout(function(e) {
        closeQuicktip(this);
    });
});
function openQuicktip(elem,e) {
    var x = e.pageX;
    var y = e.pageY;
    $('.helpbox').fadeIn('fast');
    $('.helpbox').css('top', y).css('left', x + 10 );
    $('.helpbox .desc').html($(elem).attr('alt'));
}


function closeQuicktip($elem) {
    $('.helpbox').fadeOut('fast');
}