當元素編程移動到鼠標下時，jQuery懸停不會觸發

我有一個具有懸停效果的圖像（當鼠標懸停時效果不透明度更高）。當鼠標移入和移出時，它可以按需要工作。當元素編程移動到鼠標下時，jQuery懸停不會觸發

但是，圖像本身正在移動（我週期性地更改css屬性頂部）。當鼠標不移動並且圖像在鼠標光標下移動時，不會觸發相關事件。這意味着懸停功能不會被調用。我也嘗試使用mouseenter和mouseleave事件，但它們也不起作用。

什麼將是一個很好的方法來獲得所需的行爲（只要鼠標移動到圖像，無論它是因爲到了那裏懸停效果）？

來源

2010-12-09 travelboy

有趣的問題，但我的懷疑是徒勞的。不過，+1是一個很好的問題。 – 2010-12-09 21:58:37

什麼關於CSS懸停效果？ – rcravens 2010-12-09 22:06:09

您將無法觸發鼠標事件，如果鼠標不動，雖然你將能夠檢查在鼠標是當圖像被移動。你需要做的是跟蹤鼠標在全局變量中的位置，並檢查它在移動時是否位於圖像中。

jQuery有關於如何使用他們的圖書館做一個漂亮的文章：http://docs.jquery.com/Tutorials:Mouse_Position

要找到你的形象，你可以使用jQuery的位置功能位置：http://api.jquery.com/position/

有了那個位置，你可以創建一個邊界使用圖像的高度/寬度。在你的圖片移動檢查，看看這個全球鼠標位置是在你的圖像範圍內，你應該很好去。

這是我會怎麼寫的代碼（完全未經測試順便說一句）：

var mousex = 0; 
var mousey = 0; 

jQuery(document).ready(function(){ 
    $(document).mousemove(function(e){ 
     mousex = e.pageX; 
     mousey = e.pageY; 
    }); 
}) 

img.move(function(){ 
    ...move code... 
    var p = $(this).position(); 
    if(mousex >= p.left && mousex <= p.left + $(this).width 
    && mousey <= p.top && mousey >= p.top + $(this).height) 
    { 
    ...opacity code... 
    } 
});

來源

2010-12-09 22:20:04 wajiw

您可以手動測試，當你移動，然後將圖像觸發所需的事件，看看鼠標在圖像中。

Mouse position using jQuery outside of events會告訴你如何跟蹤鼠標的位置。然後找到圖像的偏移量並查看它是否在圖像內。

來源

2010-12-09 22:21:35 Ryan

除了wajiw的和Ryan的回答，您應該觸發的mouseenter和你檢測到鼠標懸停/不通過形象，使任何代碼，你必然要.hover()仍執行鼠標離開事件：

$(".my-image").trigger("mouseenter"); 
$(".my-image").trigger("mouseleave");

來源

2010-12-09 22:24:26

@wajiw發佈了一個很好的解決方案，但不幸的是它受到拼寫錯誤的困擾，這意味着它在修復之前無法使用。

這裏是一個類，你可以用它測試和工程，這將使您測試的對象是在鼠標下。

類定義

// keeps track of recent mouse position and provides functionality to check if mouse is over an object 
// useful for when nodes appear underneath the mouse without mouse movement and we need to trigger hover 
// see http://stackoverflow.com/questions/4403518 
function MouseTracker($) { 
    var mouseX, mouseY; 

    $(document).mousemove(function(e) { 
    mouseX = e.pageX; 
    mouseY = e.pageY; 
    }); 

    return { 
    isOver: function(node) { 
     var p = $(node).offset(); 
     if (mouseX >= p.left && mouseX <= p.left + $(node).width() 
     && mouseY >= p.top && mouseY <= p.top + $(node).height()) 
     { 
     return true; 
     } 
     return false; 
    } 
    } 
}

使用例如

var mouseTracker = new MouseTracker(jQuery); 
if (mouseTracker.isOver($('#my-object-in-question'))) { 
    $('#my-object-in-question').trigger("mouseenter"); 
}

希望有所幫助。

我能做出這樣成jQuery插件，如果有人想它很容易，只是給我發一個，我會繼續前進。

馬特

來源

2011-10-26 10:45:09

當元素編程移動到鼠標下時，jQuery懸停不會觸發

回答

相關問題