表格行叠加

Question

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

我被困在几件事上：

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

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

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

编辑2：我最终使用了hoverIntent jquery插件，因为它解决了毛刺问题。

Answer 1

我可以帮助您解决第一个问题：您应该使用鼠标悬停而不是 mouseenter 查看this link以获取更多信息，基本上只有当前div的鼠标悬停触发器当mouseenter触发当前div和所有父项时，移动鼠标会继续触发父div的mouseenter。

修改：哦！并保持mouseleave触发overlay.hide

你应该将overlay.hide绑定到overlay.mouseleave。（即当鼠标离开叠加层时，而不是因为叠加层位于其前面的行）

修改：这是更新，http://jsfiddle.net/YCZ3J/32/看看我把右边：'0px'，宽度：'66，7％'放在Overlay.css中，这样它就会留下图像免费。

当您将叠加层鼠标移动到另一个叠加移动时，您会看到有一个小故障，完成滑动过渡，然后在一秒后再次向下滑动。