Jquery 1.9.1 - 在懸停時根據光標位置移動創建的元素

Question

我需要移動當鼠標移動到拇指上時將鼠標懸停在該拇指上的圖像。我怎樣才能做到這一點？ 我有這樣的功能（它的工作）：

var body = $('body'), 
slike = $('.oglas_slika'); 


function image_hover(url){ 
    var image = '<img class="oglas_slika_velika" src="' + url +'">'; 
    return image; 
} 

slike.hover(
    function(e){ 
     body.append(image_hover($(this).data('url'))); 
     $(".oglas_slika_velika") 
      .css("top", (e.pageY) + "px") 
      .css("left", (e.pageX) + "px") 
      .fadeIn("slow"); 
    }, 
    function(){ 
     body.find('.oglas_slika_velika').remove(); 
    } 
); 

我想這一個，但我正在閃爍（圖像出現在隨機的地方在頁面上同時移動鼠標）：

var body = $('body'), 
slike = $('.oglas_slika'); 

function image_hover(url){ 
    var image = '<img class="oglas_slika_velika" src="' + url +'">'; 
    return image; 
} 

slike.hover(
    function(){ 
     body.append(image_hover($(this).data('url'))); 
     $(this).on('mousemove', function(e){ 
      $(".oglas_slika_velika") 
      .css("top", (e.pageY) + "px") 
      .css("left", (e.pageX) + "px") 
      .fadeIn("slow"); 
      return false; 
     }); 
    }, 
    function(){ 
     body.find('.oglas_slika_velika').remove(); 
    } 
); 

Answer 1

jsFiddle Demo

的閃爍是創建的元素的結果導致懸停的mouseout部分被調用。這是刪除圖像元素，並且一旦元素被刪除，懸停的mouseover部分被調用，並且圖像被重新創建，同時調用fadeIn。該過程中動畫隊列過載並最終拋出錯誤（Uncaught RangeError: Maximum call stack size exceeded），這將導致極其不一致的結果。

的解決這個問題，你應該跟蹤其中的鼠標懸停區域是與對象：

var sp = {}; 
sp.top = slike.position().top; 
sp.left = slike.position().left; 
sp.right = sp.left + slike.width(); 
sp.bottom = sp.top + slike.height(); 

，並跟蹤圖像尺寸：

var w; 
var h; 

它可以一次加滿追加

body.append(image_hover()); 
w = $(".oglas_slika_velika").width(); 
h = $(".oglas_slika_velika").height(); 

接下來將確保鼠標光標真正擺脫通過檢查所創建的圖像和光標

if(e.pageY + h > sp.bottom || e.pageY - h < sp.top){ 
body.find('.oglas_slika_velika').remove(); 
}else{ 
if(e.pageX + w > sp.right || e.pageX - w < sp.left){ 
    body.find('.oglas_slika_velika').remove(); 
} 
} 

之間的碰撞。雖然這需要稍微更多的工作懸停區域，它也有很多更精確和更不易出錯。它將允許圖像直接跟蹤鼠標而不是推到偏移量。

如果將圖像直接放置在鼠標的位置並不重要，那麼@Luigi De Rosa的回答將很好地工作，並且需要較少的工作量。

Answer 2

嘗試以這種方式

.css("top", (e.pageY)+10 + "px") 
.css("left", (e.pageX)+10 + "px") 

的問題是，如果你用鼠標右下方走，你的鼠標繼續.oglas_slika_velika，它引發了.oglas_添加「保證金」的10px的SLIKA（所以刪除功能）

我希望，它使你

的jsfiddle這裏的感覺：http://jsfiddle.net/bzGTQ/