Question

$(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');
}

这是我的jQuery，每次移动鼠标时如何让它“改变”坐标？

Answer 1

使用mousemove事件。

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

也可以考虑添加一个保存QuickTip打开/关闭状态的全局变量。并且只有在QuickTip打开时才更新.helpbox。

..弗雷德里克

Answer 2

结束了这个：


$(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');
}

JQuery：更新鼠标移动时的鼠标悬停

2 个答案: