将鼠标悬停在任何“a”链接上时，jQuery图像悬停/浮动在光标旁边？

Question

嗨，我有这个来自This Post. 的代码示例我想要的是当光标经过超链接或任何类型的“a”链接时显示在光标旁边的 png 图像。

这是原文：

var $img = $('img');
$img.hide();
$('div').mousemove(function(e) {
  $img.stop(1, 1).fadeIn();
  $('img').offset({
    top: e.pageY - $img.outerHeight(),
    left: e.pageX - $img.outerWidth()
});
}).mouseleave(function() {
$img.fadeOut();
});

HTML：

<div>
<img src="http://i574.photobucket.com/albums/ss184/wsganewsletter/Other/Icon-Mega.png"    
/>
</div>

这是我尝试修改的版本，不使用 HTML 并且仅通过 jQuery 加载图像：S

*var img = $("../Cursor.png");
$img.hide();
$('a').mousemove(function(e) {
  $img.stop(1, 1).fadeIn();
  $('img').offset({
    top: e.pageY - $img.outerHeight(),
    left: e.pageX - ($img.outerWidth()/2)
});
}).mouseleave(function() {
$img.fadeOut();
});?

我确信这是一个相对容易的解决方法，我仍然倾向于，请你帮帮我。 谢谢:)

Answer 1

这正是您所需要的。

<script type="text/javascript">
    $(document).ready(function() {
        var $img = $("#cursor");
        $img.hide();
        $('a').mousemove(function(e) {
            $img.stop(1, 1).fadeIn();
            $img.offset({
                top: e.pageY - $img.outerHeight(),
                left: e.pageX - ($img.outerWidth()/2)
            });
        }).mouseleave(function() {
            $img.fadeOut();
        });
    });
</script>

<img id="cursor" src="http://i574.photobucket.com/albums/ss184/wsganewsletter/Other/Icon-Mega.png" style="position: absolute">
<a href="#">hover me</a>

Answer 2

你需要像这样设置一个img标签：

var img = $('<img src="../Cursor.png"/>');

Answer 3

您必须构造 DOM 元素 - 类似于：

var img = $("<img id='myimg' src='../Cursor.png' />");