如何在jquery中使用.hover事件获取html中的坐标？
大家能帮我创建一个包含xy坐标的工具提示吗？以下是我的示例代码：如何在jquery中使用.hover事件获取html中的坐标？,jquery,Jquery,大家能帮我创建一个包含xy坐标的工具提示吗？以下是我的示例代码： <style type="text/css"> a img { border: 3px solid blue; } #largeImage { position: absolute; padding: .5em; background: #e3e3e3;
<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>
img{
边框：3件纯蓝；
}
#大图像{
位置：绝对位置；
填充：.5em；
背景：#e3；
边框：1px实心#bfbf；
}
$（函数（）{
var offsetX=20；
var-offsetY=10；
$（'a'）。悬停（函数（e）{
var href=$（this.attr（'href'）；
var x=e.pageX-this.offsetLeft；
变量y=e.pageY-this.offsetTop；
$（“+”X:“+X+”Y:“+Y+”）
.css（'top'，例如pageY+offsetY）
.css（'left'，e.pageX+offsetX）
.附于（“主体”）；
}，函数（）{
$（“#大图像”）.remove（）；
});
$（'a'）.mousemove（函数（e）{
$（“#大图像”）
.css（'top'，例如pageY+offsetY）
.css（'left'，例如pageX+offsetX）；
});
});
*此代码实际上类似于图像的工具提示，因此只需忽略id名称。
悬停悬停