javascript - 表格行的叠加

Question

我试图为表格行创建覆盖。我希望在用户的鼠标在该行上停留一秒钟左右后显示叠加层，并在鼠标离开该行后将其删除。我开始研究这个：http: //jsfiddle.net/YCZ3J/

我被困在几件事上：

1. 在行内移动鼠标时，mouseenter 事件会持续触发。我不知道为什么。
2. 我希望覆盖覆盖该行，除了图像 TD，并且也没有取得太大的成功。
3. 我希望每一行在叠加层上有不同​​的文本/按钮。我尝试向每个 TR 添加一个 div 并使用.parent().('.overlay')，但无法使其正常工作。

任何帮助将不胜感激。谢谢！

编辑：经过一些指示，这是一个满足我所有要求的工作小提琴：http: //jsfiddle.net/YCZ3J/37/

编辑 2：我最终选择了 hoverIntent jquery 插件，因为它解决了故障问题。

Answer 1

对于第一个问题，我可以为您提供帮助：您应该使用mouseover而不是mouseenter查看此链接以获取更多信息，基本上当 mouseenter 触发当前 div 和所有父级时，mouseover 仅触发当前 div，因此移动鼠标会不断触发父级 div 的 mouseenter .

编辑：哦！并保持 mouseleave 触发 overlay.hide

您应该将overlay.hide绑定到overlay.mouseleave。（即当鼠标离开覆盖层时，而不是行，因为覆盖层在它前面）

编辑：这里是更新， http: //jsfiddle.net/YCZ3J/32/看到我在 Overlay.css 中输入了正确的：'0px', width:'66,7%' 这样它就可以让图像自由了。

正如您将看到的，当您将覆盖层移到另一个覆盖层移动时，会出现一个小故障，完成向上滑动过渡，然后在一秒钟后再次向下滑动。