图像上的鼠标光标坐标：<br/> 不工作答案

【问题标题】：Mouse cursor coordinates over image: <br/> not working图像上的鼠标光标坐标：<br/> 不工作
【发布时间】：2012-06-28 21:13:06
【问题描述】：

感谢我收到的here 的建议，我清理了我的代码，现在我正在使用纯 jQuery。我对找到的 here 的脚本进行了轻微修改，我得到了这个：

window.onload = function(){

    var tooltip = $( '<div id="tooltip">' ).appendTo( 'body' )[0];

$( 'img' ).
    each(function () {
        var pos = $( this ).position(),
            top = pos.top,
            left = pos.left,
            width = $( this ).width(),
            height = $( this ).height(); 
        $( this ).
            mousemove(function ( e ) {
                var x = e.pageX - left,
                    y = e.pageY - top;

                $( tooltip ).text( 'x = ' + x + ', y = ' + y ).css({
                    left: e.clientX + 10,
                    top: e.clientY + 10
                }).show();
            }).
            mouseleave(function () {
                $( tooltip ).hide();
            }); 

    });

};

我有一个问题：我尝试将我的代码更改为：

$( tooltip ).text( 'x = ' + x + '<br/> y = ' + y ).css({

但它不起作用。我没有打破界限，而是得到了这个：

【问题讨论】：

如果你想将 HTML 添加到你的工具提示中，你需要使用.html()，而不是.text()。

标签： javascript jquery

【解决方案1】：

改变：

$( tooltip ).text( 'x = ' + x + '<br/> y = ' + y ).css({

到：

$( tooltip ).html( 'x = ' + x + '<br/> y = ' + y ).css({

【讨论】：

非常感谢罗伊夫！我会接受您的回答并编辑问题，以便只有一个问题，然后我会打开另一个问题。
完成。现在我的问题只包含一个主题。