当目标div具有子输入字段时，jquery mouseenter / mouseleave错误

Question

我有两个可排序的列表，一个是嵌套的，鼠标在嵌套的可排序列表的li元素上输入效果。我的问题是，当用户在输入字段的子元素上快速移动鼠标时，mouseenter和mouseleave函数被调用不一致。

以下是所发生情况的示例，您必须将窗格拖到列表中，然后将3-4个文本框项目拖到窗格中才能看到问题。您可以看到右上角的2个数字跟踪鼠标的输入/输出。注意到目前为止我只在firefox 3.5.7中测试过我的网站。问题似乎在Firefox 3.6版本中得到修复，但我需要这个在所有以前版本的Firefox 3.x上运行

example

我的jquery 1.4.1代码：

以下是mouseenter和mouseleave函数：

$(".pane > li").live("mouseover", function(){
$("#in").html(in1);
$(this).children(".test").stop().animate({opacity: 1},400);
in1++;
});

$(".pane > li").live("mouseout", function(){
$("#out").html(out1);
$(this).children(".test").stop().animate({opacity: 0},400);
out1++;
});

当我调用将li元素动态添加到页面中的函数时，我试图在不使用live（）的情况下分配mouseenter和mouseleave函数。但是，问题仍然存在，您可以在firebug调试器中看到错误。也许它与Firefox中的relatedTarget有关。感谢您的帮助。

Answer 1

哇，看起来很酷。无论如何，也许你可以做到这一点，当“mouseenter”触发一个东西时，它会运行与所有其他东西上的“mouseout”相对应的代码。由于它们不能重叠，这似乎有效。

Answer 2

我通过在输入字段上绝对定位透明div并在单击时降低div的z-index，找到了一个不太优雅的解决方案。同时我专注于输入字段，因此div几乎对用户不可见。如果有人有任何建议，我仍然会更喜欢更优雅的修复。