Javascript：孩子不應該繼承鼠標狀態從父

我試圖創建一個小圖像，遵循鼠標左右，但只存在於特定區域內。我使用javascript/jquery在鼠標進入區域時創建圖像，並在鼠標離開時將其刪除。Javascript：孩子不應該繼承鼠標狀態從父

問題是，如果我在區域div內創建「追隨者」，圖像似乎被認爲是其父母的一部分，用於確定鼠標狀態，因此即使鼠標位於該區域之外，圖像仍然存在。（如果我把鼠標移動速度不夠快，光標會逃跑和隨在前看不見）

這裏是我使用的代碼：

$("#area").mouseenter(function() { 
    $("#area").append("<img id='follower' src='follower.png'/>"); 
}); 

$("#area").mousemove(function(event){ 
    $("#follower").css("top",event.pageY-35); 
    $("#follower").css("left",event.pageX-35); 
}); 

$("#area").mouseleave(function() { 
    $("#follower").remove(); 
});

的jsfiddle：http://jsfiddle.net/cgWdF/186/

我也試圖創建一個單獨的div內的「追隨者」，這工作，但會導致圖像奇怪的閃爍，如下所示：http://jsfiddle.net/cgWdF/187/

任何幫助，與此，將不勝感激。只要沒有看到閃爍的影響，追隨者是否在區域div內創建並不重要。另外，我希望儘可能保持代碼緊湊，但我會盡我所能。

來源

2015-11-06 SamOceans

注意：你可能會發現「懸停」有助於凝結你的代碼:) https://api.jquery.com/hover/ – AndrewB

發生這種情況的原因是您的mouseleave不是您認爲其發生的元素。事實上，你的精靈正在觸發事件，因爲那時你的指針已經超過了它。

爲了防止發生這種情況，您可以強制頁面取消精靈上的所有指針事件。通過這樣做，#area將按照預期觸發您的指針事件。 css規則pointer-events可能對此有所幫助。

CSS

#follower { 
    position: absolute; 
    height: 80px; 
    pointer-events: none; 
}

可能有更好的方法來對付這一點，但它是最簡單的，我可以想出現在。

希望這會有所幫助！

請參閱FIDDLE。

來源

2015-11-06 00:29:45

這很好用！ ...我當然不能抱怨一個單線解決方案。：P – SamOceans

Javascript：孩子不應該繼承鼠標狀態從父

回答

相關問題