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' />");

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

3 个答案: