将浮动工具栏放在表格行上答案

【问题标题】：Put a floating toolbar over a table row将浮动工具栏放在表格行上
【发布时间】：2017-09-26 03:46:32
【问题描述】：

我可能遗漏了一些明显的东西，但是：

当我将鼠标悬停在行上时，我需要一个小工具栏来显示表格的一行（必须是表格，我正在使用旧代码）上方。

一个问题是 tr 不采用 position:relative （根据 w3c 未定义）所以我最终创建了一个隐藏单元格，并将工具栏放入其中，将td 上的 position:relative ...然后是凌乱的 CSS 和一些 jQuery，当行悬停时显示 td 但随后存在问题，因为 HTML 引擎认为新显示的单元格是表格的一部分并且整行移出。

这有点可怕。

我想我可能必须让 td 可见但宽度为零 - 但我希望有人可能有更好的主意。

【问题讨论】：

如果我们能看到您的代码（在您的域上或在 jsfeiddle.net 上），那就太好了。
绝对定位的 div 是不可能的吗？
@KyleSevenoaks 的意思是jsfiddle.net
工作压力意味着我不能花时间隔离代码（虽然很有趣） - 我将使用下面的答案版本。感谢您提供帮助。

标签： jquery css html-table css-float toolbar

【解决方案1】：

我的想法是使用 div 和 CSS 制作一个工具栏并将其隐藏。将鼠标悬停在该行上意味着您正处于您想要工具栏的位置。

现在使用

$('#example').mouseover(function(e){
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
   });

我可以获得可以显示工具栏的当前位置。一旦鼠标离开该行，我就可以隐藏该工具栏。希望我正确理解了您的问题。

【讨论】：