带有堆叠元素的JQuery鼠标事件

Question

我有一个带有表格的网页。使用jQuery 1.3.2，我绝对将div元素放在表格中每行的顶部。重叠的div具有更高的z指数。

我将'mouseenter'和'mouseleave'事件附加到重叠的div元素。在mouseenter上，我在覆盖的div周围抛出一个红色边框。在mouseleave上，我删除边框。因此，当鼠标移动到表格上时，效果是使每个表格行都突出显示。

一切正常，直到鼠标在表格中输入一些文字。然后边界关闭。所以似乎正在发生的事情是：

1. 输入覆盖div - mouseenter，名为
2. 输入表格文本（仍然在重叠的div中） - mouseleave调用覆盖div。

我最终希望在覆盖div中的任何位置捕获click事件以执行其他操作，因此我无法使用CSS来处理此事。

以下是代码：

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

我很感激任何有关获取重叠div以捕获鼠标或让表格忽略它的帮助。

Answer 1

根据我的理解，mouseenter和mouseleave不会向下传递给子元素。 （src：Mouseenter and mouseleave events for Firefox）。

尝试鼠标悬停和鼠标输出，它应该按预期工作。

编辑：通过向下冒泡到子元素，我的意思是从子元素中冒出来。

Answer 2

似乎是一个IE问题。无论如何，将div更改为透明的img解决了它。