Javascript 当将鼠标悬停在任何"；a「；链接

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

这是原件：

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:

我相信这是一个相对容易的解决办法，我仍然在学习，你能帮我吗。

---

谢谢：）

您需要像这样设置img标签：

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

var img=$（''）；

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

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

var img=$（“”）；

这正是您所需要的

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

$（文档）.ready（函数（）{
var$img=$（“#光标”）；
$img.hide（）；
$（'a'）.mousemove（函数（e）{
$img.stop（1,1.fadeIn（）；
$img.offset({
顶部：e.pageY-$img.outerHeight（），
左：e.pageX-（$img.outerWidth（）/2）
});
}).mouseleave（函数（）{
$img.fadeOut（）；
});
});

嘿，谢谢，太好了！只是当你在链接/文本周围移动光标时，图像可能会有点挑剔，当你在文本的透明像素之间移动时，图像很容易消失。有没有办法在文本上添加一个不可见的区域或div，并加上一点填充？Thanks@happycamper1221未来的访问者闪烁的问题来自鼠标在悬停图像上的瞬间悬停，导致图像消失，只有鼠标悬停锚定标记并在新位置重新显示图像时才会出现。我通过在顶部和左侧添加一个小偏移来修复它。以下是我的解决方案：嗨，我无法让Tahir Yasin或您的代码示例正常工作，我已经尝试了一个小时了：（你可以编辑你的示例来处理整个脚本吗？ThanksIt需要没有HTML来处理我正在构建的内容。很抱歉，没有意识到你回答了…当我将鼠标悬停在上面时，图像没有显示此代码，但它会显示HTML@Tahir Yasin响应。但是我不能使用HTML？

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

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