jQuery .mousemove（）與：懸停

Question

我想寫一個簡單的懸停預覽效果。我使用CSS：hover僞類來顯示較大的圖像，並使用jQuery .mousemove（）來跟蹤鼠標光標的位置。較大的圖像應該出現在懸停上並按照鼠標光標。

問題是，當鼠標不再「懸停」時，較大的圖像不會消失。它會在整個頁面上跟隨鼠標幾秒鐘，然後終於離開。它似乎在IE8中稍微好一些，但在其他任何瀏覽器中都沒有（IE8也給我定位問題，但這是一個不同的問題）。

任何幫助，將不勝感激。

Here's the code：

Answer 1

只要給多一點的填充在你的偏移，使鼠標不會懸停在大圖像上。看看這jsFiddle

var relX = pageX - parentOffset.left +20; 
var relY = pageY - parentOffset.top+20; 

Answer 2

我想看看這傢伙在這裏所做的：

例子：http://cssglobe.com/lab/tooltip/03/ 代碼：http://cssglobe.com/lab/tooltip/03/main.js

Answer 3

看來，懸停效果只是不趕上鼠標移動速度不夠快。您可能需要做的是不要純粹依賴:hover，而是需要有一個.mouseout回調，該回調有一個超時（一些理智的數量可能是500）來移除圖像，而.mouseover會重置超時（您可以將超時.data徘徊圖像 - 圖像與回調）。

我沒有鑽研到你的代碼，但這裏是一些僞代碼來解釋我的意思

$(".big-img-that-follows-mouse").mouseout(function() { 
    var $this = $(this); 
    //You can also .hide() or whatever instead of .remove() 
    $this.data('timeout', setTimeout(function() { $this.remove(); }), 500)); 
}) 
.mouseover(function() { 
    if ($(this).data('timer') { 
     clearTimeout($(this).data('timer')); 
     $(this).removeData('timer'); 
    } 
}); 

Answer 4

這本來是很好，如果你想格式化的，而不是它傾倒的jsfiddle你的HTML在一個長串中。

無論如何，你的問題在於你的大圖像嵌套在你的列表中，所以當你將它徘徊時，你還在徘徊你的原始項目。