表格行的叠加层

Question

我正在尝试为表格行创建叠加层。我希望在用户鼠标停留在该行上一秒钟左右后显示叠加层，并在鼠标离开该行后将其移除。我已经开始尝试实现此功能：http://jsfiddle.net/YCZ3J/ 我遇到了几个问题：

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

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

编辑：经过一些指导，这里是一个满足所有要求的工作Fiddle：http://jsfiddle.net/YCZ3J/37/ 编辑2：最终我选择使用hoverIntent jquery插件，因为它可以解决故障问题。

- Elad Lachmi

Answer 1

我可以帮你解决第一个问题：你应该使用mouseover而不是mouseenter，更多信息请参见此链接，基本上mouseover仅触发当前div时，mouseenter会触发当前div和所有父级的div，因此移动鼠标会一直触发父div的mouseenter。

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

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

编辑： ：这里是更新，http://jsfiddle.net/YCZ3J/32/ 可以看到我在Overlay.css中放置了right:'0px'，width:'66,7%'，因此它将留下图像。

正如您所看到的，在从覆盖层的mouseleave到另一个覆盖层时，会出现故障，因为覆盖层移动，完成slideup转换，然后在一秒钟后再次下滑。

- Carlo Moretti

---

谢谢！我更新了代码片段。现在我发现另一个问题。当我从一行移动到另一行时，可能会出现问题，但如果为每一行使用不同的div，则可能会解决这个问题。 - Elad Lachmi

是的，我认为这是因为相同的覆盖层在进行新的下滑转换之前结束了其上滑转换。 - Carlo Moretti

谢谢！三个里面两个对了 :) 我在mouseover事件中添加了.stop()来停止故障。这是更新后的版本：http://jsfiddle.net/YCZ3J/36/ - Elad Lachmi