javascript - 将鼠标悬停在图像上时，如何显示带有 x-y 坐标的十字线光标？

Question

我在 div 中有一张图片，用户可以点击它。

当悬停在该图像上时，有没有办法实时显示光标的坐标？我知道要显示十字准线光标，必须设置光标类型:cursor: crosshair - 但我怎样才能同时显示这些坐标？

Answer 1

尝试:

$(function () {
    $('#hover-img')

    // show the coordinates box on mouseenter
    .bind('mouseenter', function () {
      $('#coordinates').show();
    })

    // hide it on mouseleave
    .bind('mouseleave', function () {
      $('#coordinates').hide();
    })

    // update text and position on mousemove
    .bind('mousemove', function (evt) {
      $('#coordinates').html(
        (evt.pageX - this.offsetLeft) + '/' + (evt.pageY - this.offsetTop)
      ).css({
        left: evt.pageX + 20,
        top: evt.pageY + 20
      })
    });
});

注意:参见» demo对于使用的 html 元素。