表行覆盖

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。

编辑：哦！并保持鼠标离开触发overlay.hide

你应该绑定overlay.hide到overlay.mouseleave。（即当鼠标离开覆盖，而不是排因为覆盖在它的前面）

编辑：这里是更新，http://jsfiddle.net/YCZ3J/32/看到我把右'：0px'，宽：'66,7％'放在Overlay.css中，所以它会让图像免费。

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