覆蓋/覆蓋/堆疊元素上的Javascript鼠標事件

我想捕獲位於其他元素下的元素的鼠標事件。覆蓋/覆蓋/堆疊元素上的Javascript鼠標事件

這裏是什麼，我有一個例子：http://jsfiddle.net/KVLkp/13/

現在我想那是什麼藍方有黃色邊框當鼠標移動到紅場。

最重要的事情是：

它們的圖像。所以沒有辦法在其他嵌入一個元素。
這是一個簡單的例子，但實際上有很多img。所以搜索按座標計算懸停的元素是不是我的解決方案（我已經找到這個答案）
有兩幅圖像之間沒有聯繫，只是鼠標超過他們所有

謝謝你的幫助

編輯：我寫我一般情況下一個更完整的例子： - 在DOM IMG順序是不固定的，可以在現場改變 - 頂部和底部的圖像有不同的大小和位置

感謝大家！

來源

2012-03-08 Guile

鑑於您已經預料到了合理的解決方法，我不確定您的請求能否真正實現。將DOM虛擬成氣泡，而不是任意定位。你對你的房屋有絕對的把握嗎？例如：當然，你不能在另一個圖像中嵌入一個圖像，但是他們*有*是圖像嗎？他們是否可以成爲具有背景圖像的DIV元素？ – 2012-03-08 09:43:18

下面是似乎可行的一種方法：http://jsfiddle.net/KVLkp/17/（雖然也許它失敗了「兩個圖像之間沒有鏈接」的標準）。 – nnnnnn 2012-03-08 10:13:12

@DavidHedlund他們確實必須是圖像，因爲多個圖像將顯示（非常像）隨機位置，各種大小，因爲我不想溢出dom（我的現實是我可以有4000個圖像） – Guile 2012-03-08 10:34:09

你可以嘗試沿着以下線的東西：

<style> 
img.hover { 
    border-color : yellow; 
} 
</style> 
<script> 
$('img').mouseenter(function() { 
    $(this).addClass("hover"); 
}).mouseleave(function (e) { 
    var next = e.relatedTarget; 
    if (next.tagName.toUpperCase()!="IMG" 
       || $(next).hasClass("hover")) 
     $(this).removeClass("hover"); 
}); 
</script>

，而不是設置邊框的顏色直接，我定義了一個名爲「懸停」類，設置顏色，讓我可以輕鬆測試一個給定的元素是否具有邊界，而不是在任何地方對硬件顏色進行硬編碼，然後我使用event.relatedTarget屬性來查看鼠標離開時的位置。

只有當鼠標要移動的元素不是圖像或是已經有懸停類的圖像時，纔會刪除「懸停」類。似乎在這個演示中工作得非常好：http://jsfiddle.net/KVLkp/18/，但如果兩張圖像並排放置，並且它們之間沒有間隙，或者頂部的圖像沒有完全「包含」（在座標意義上）由img重疊 - 我決定繼續發佈它，因爲我希望在演示中看到event.relatedTarget會給你足夠的開始提供適合你的實際情況的東西。

（注：「懸停」是一類給CSS的名聲已經擁有了:hover僞類，但我記得我不能打擾更改它在小提琴和這裏的時間）

來源

2012-03-08 10:52:31 nnnnnn

你真的明白了！我認爲relatedTarget是我的神祕方法！謝謝！我用我的新例子試了一下（你不知道它）。它仍然有一些錯誤的東西，但我會設法處理它！謝謝！ http://jsfiddle.net/KVLkp/20/ – Guile 2012-03-08 11:00:50

不客氣。就像我說的，我希望它能讓你走上正確的軌道，即使有些情況下我的代碼不能工作。（對不起，我今天沒有時間再看看它。） – nnnnnn 2012-03-08 11:12:22

我接受這個答案。但我沒有看到relatedTarget是鼠標剛剛離開的目標元素。這不完全是我想要的。非常感謝你！ – Guile 2012-03-08 12:40:00

我覺得你比你更復雜的事情。只要保持簡單就可以將你的事件放在內部正方形和外部正方形上，但不要使用「this」使用通過id來獲得外部正方形。 $（'＃bluesqure'），然後就像懸停在藍色方塊上那樣做你的工作。

我不知道這是否會成爲您真實世界場景中的可能解決方案。

來源

2012-03-08 10:15:54 John

這是不可能的，因爲當鼠標在紅色方塊上時，我不知道要處理哪個藍色方塊。我的意思是我有100個紅色正方形和100個隨機座標的藍色正方形。 – Guile 2012-03-08 10:28:27

我看起來像nnnnnn爲你解決它 – John 2012-03-09 05:18:13

覆蓋/覆蓋/堆疊元素上的Javascript鼠標事件

回答

相關問題