2011-11-25 68 views
4

我需要將鼠標懸停在臉上綁定圖像鼠標事件鼠標移動VS鼠標懸停VS別的東西

只是覺得Facebook的圖片的標籤的一秒鐘,面積:它表明你的名字,是嗎?

以及我做了一個非常類似的事情,但地圖和citynames,OK,我們開始吧:

$('img#mapaMundi').bind('mousemove',function(e){ 

     x = getX(); 
     y = getY(); 
     var found = find(x, y); 

     if (found == undefined) { 
      console.log('There is no tagged city for this position'); 
     } else { 
      show(found); 
     } 

    }); 

而這個偉大的工程,它顯示所需的標籤(含動畫之類的東西),但只有當鼠標移動到該區域,所以如果你移動到該區域並將鼠標留在那裏(因爲它不移動),它將消失,

如果我使用.bind('mouseover')它不會工作,因爲當你懸停它的圖像其中一條邊上,

你有什麼建議?

回答

2

你可以結合也許鼠標懸停或的mouseenter和mousemove

http://api.jquery.com/mousemove/

http://api.jquery.com/mouseenter/

所以當mouseenter - > mousemove

mouseleave - >什麼都不做?

var int = null; 
$('#element').hover(function() { 
int = setInterval(someFunc, 100); 
}, function() { 
clearInterval(int); 
}); 

function someFunc() { 
DO YOUR MOUSEMOVE THINGS 
} 
+0

爲了保護範圍,我更喜歡$('#element')。each(function(){var int = null; $(this).hover .. 。}); 或者在自我調用匿名函數中包含整個代碼 –

+0

$('#element')。each?這是沒有任何意義,當一個ID是唯一的 –

+0

它創建另一個功能範圍;) –

3

上,將檢查鼠標位置的每個第二功能鼠標懸停的setInterval和鼠標移開時明確表示,間隔

如果你使用jQuery,.hover()同時提供鼠標懸停和鼠標移開

+0

這也不錯 –

+0

.hover()僅在懸停射擊(但不能同時移動) –

+0

看到我更新的答案,所以你知道我們的意思 –