javascript - 表格行的叠加

Question

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

我被困在几件事上:

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

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

编辑: 经过一些指点后，这是一个满足我所有要求的工作 fiddle :http://jsfiddle.net/YCZ3J/37/

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

Answer 1

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

编辑:哦!并保持 mouseleave 触发 overlay.hide

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

编辑:这是更新，http://jsfiddle.net/YCZ3J/32/看到我在 Overlay.css 中放置了 right:'0px', width:'66,7%' 这样它就会使图像自由。

正如您将看到的，当您将鼠标从叠加层移到另一个叠加层时会出现一个小故障，因为叠加层会移动，完成向上滑动过渡，然后在一秒后再次向下滑动。