堆疊元素的JQuery鼠標事件

我有一個帶有表格的網頁。使用jQuery 1.3.2，我絕對將div元素放置在表格上每行的頂部。覆蓋div具有更高的Z-索引。堆疊元素的JQuery鼠標事件

我將'mouseenter'和'mouseleave'事件附加到疊加的div元素上。在mouseenter上，我在覆蓋div上放置一個紅色邊框。在mouseleave上，我刪除邊框。所以效果是當鼠標移動到表格上時，每個表格行都會高亮顯示。

一切正常，直到鼠標在表中輸入一些文本。然後邊框關閉。那麼，什麼似乎發生的事情是：

輸入疊加格 - 所謂的mouseenter
輸入表中的文本（仍然在覆蓋格） - 鼠標離開呼籲覆蓋股利。

我最終希望捕獲覆蓋div內任何地方的click事件來做其他事情，所以我不能使用CSS來處理這個問題。

下面的代碼：

 
    $('.overlay').bind("mouseenter", function() { 
      $(this).css('border','solid 1px red'); 
     } 
    ) 
    $('.overlay').bind("mouseleave", function() { 
      $(this).css('border','none'); 
     } 
    )

我會很感激的任何幫助或者得到覆蓋div來捕獲鼠標或獲取表忽略它。

來源

2009-10-19 Jon

您的DIV中是否包含任何浮動元素？如果是這樣，很可能你需要將overflow：hidden應用到你的DIV元素上，作爲一個hack來清除浮游物。 – 2009-10-19 23:48:41

不漂浮。只是一個空白的div覆蓋表格行，使表格行對鼠標敏感。 – Jon 2009-10-20 01:26:00

似乎是一個IE問題。無論如何，將div更改爲透明img解決了它。

來源

2009-10-20 15:28:00 Jon

從我的理解，mouseenter和mouseleave不會冒泡到子元素。（src：Mouseenter and mouseleave events for Firefox）。

嘗試使用鼠標懸停和鼠標移動，它應該按預期工作。

編輯：通過冒泡到子元素，我的意思是從子元素中冒出來。

來源

2009-10-20 00:07:51 Mercurybullet

不幸的是，桌子不是疊加層的孩子，所以事件不會冒泡。 – Jon 2009-10-20 01:27:21

哎呀，對不起。在我回應的時候，絕對的定位一定會下滑。你有沒有給鼠標移動一個機會？我看不出爲什麼它不起作用，並且mouseenter無論如何都是非標準的。 – Mercurybullet 2009-10-20 04:17:45

我開始考慮這個問題，並想知道你甚至能夠用覆蓋它的div來選擇底層文本。所以我把測試和你提到的代碼似乎工作正常（至少在Firefox中，沒有可用於測試atm的IE）。也許問題在代碼中的其他地方？或者，也許我仍然在誤解這個問題？檢查出來。 http://jsbin.com/ozeta – Mercurybullet 2009-10-20 07:52:48

堆疊元素的JQuery鼠標事件

回答

相關問題