每个人都可以帮助我如何创建包含 x y 坐标的工具提示吗？这是我的示例代码:
<style type="text/css">
a img {
border: 3px solid blue;
}
#largeImage {
position: absolute;
padding: .5em;
background: #e3e3e3;
border: 1px solid #bfbfbf;
}
</style>
<script type="text/javascript">
$(function() {
var offsetX = 20;
var offsetY = 10;
$('a').hover(function(e) {
var href = $(this).attr('href');
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
$('<div id="largeImage">' + 'X: ' + x + ' Y: ' + y + '</div>')
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX)
.appendTo('body');
}, function() {
$('#largeImage').remove();
});
$('a').mousemove(function(e) {
$('#largeImage')
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX);
});
});
</script>
<body>
<a href="Images/FredLarge.jpg">
<img src="Images/FredSmall.jpg" alt="squidward" />
</a>
</body>
此示例中发生的情况是坐标没有改变。虽然它得到了坐标但它并没有改变。
*这段代码实际上就像图像的工具提示，所以忽略id名称即可。
最佳答案
hover 不会连续触发。它只会在您移过去时触发一次，并在您移出时触发一次。这就是为什么它不随鼠标移动的原因。尝试绑定(bind)到mousemove反而。 jQuery 文档甚至有一个将鼠标悬停在正方形上并显示坐标的示例。
关于jquery - 如何使用jquery中的.hover事件获取html中的坐标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9986312/