如何在jquery中使用.hover事件获取html中的坐标？

Question

如何在jquery中使用.hover事件获取html中的坐标？

大家可以帮我解决如何创建包含xy坐标的工具提示吗？这是我的示例代码:

    <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>

Run Code Online (Sandbox Code Playgroud)

在这个例子中发生的是坐标没有改变.虽然它获得坐标但它没有改变.

*此代码实际上类似于图像的工具提示,因此只需忽略ID名称即可.

Answer 1

mrt*_*man 9

hover不连续开火.它只会在您移动时触发一次,在您移出时触发一次.所以这就是它不随鼠标移动的原因.尝试绑定到mousemove.jQuery文档甚至有一个鼠标悬停在方块上并显示坐标的例子.

归档时间：	14 年，2 月前
查看次数：	6473 次
最近记录：	14 年，2 月前