當鼠標懸停在任何「a」鏈接上時，jQuery圖像懸停/浮動在光標旁邊？

嗨，我從This Post.這個代碼示例我想要的是當光標越過超鏈接或任何種類的「a」鏈接時，顯示在光標旁邊的png圖像。當鼠標懸停在任何「a」鏈接上時，jQuery圖像懸停/浮動在光標旁邊？

以下是原文：

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(); 
});?

我相信這是一個相對簡單的修復，我仍然傾斜，請你幫我。謝謝:)

來源

2012-11-15 happycamper1221

這正是你需要什麼。

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

來源

2012-11-15 07:58:47

嘿，謝謝，太棒了！只是當你將光標移動到鏈接/文本時，圖像可能會有點挑剔，並且很容易消失在文本的透明像素之間移動。有沒有辦法讓一個不可見的區域或div在文本上有一點填充？謝謝 – happycamper1221

@ happycamper1221和未來的訪問者閃爍的問題是從暫停的鼠標懸停在懸停的圖像上，導致它只會消失，然後懸停錨標記並重新顯示圖像到一個新的位置。我通過在頂部和左側添加一個小偏移量來修復它。這是我的小提琴解決方案：http://jsfiddle.net/pTt5w/2/ – Backus

您需要設置一個img標籤是這樣的：

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

來源

2012-11-15 07:44:40

你要構建的DOM元素 - 是這樣的：

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

來源

2012-11-15 07:44:44 i100

嗨，我不能讓塔希爾·亞辛的或您的代碼示例工作，一直在努力了一個小時:( 可以編輯您的樣品與整個腳本 - 感謝 – happycamper1221

它需要有沒有HTML工作 – happycamper1221

@ happycamper1221你得到了什麼錯誤？ –

當鼠標懸停在任何「a」鏈接上時，jQuery圖像懸停/浮動在光標旁邊？

回答

相關問題