Html 第一个单元格悬停时覆盖在表格单元格上

我已经创建了一个表列表。当用户将鼠标悬停在带有3个点的第一个单元格上时，将显示“编辑”和“删除”选项，该选项下方为透明背景

当内容在一行中时，一切都很好

问题是什么时候有更多的内容。叠加的高度不会调整。我试过

top:0；底部：0；高度：100%

至

。动作

覆盖整个桌子

正文{
保证金：0
}
.桌子{
显示：表格；
宽度：100%；
边框底部：1px实心#ccc
}
tHead先生，
特罗先生{
显示：表格行；
位置：相对位置；
}
特塞尔先生{
显示：表格单元格；
填充物：5px；
背景：#fff；
边框顶部：1px实心#ccc；
}
西亚德·特塞尔{
背景：#ccc；
}
特罗：悬停，特凯尔{
背景#f4；
边框颜色：#000；
}
.tRow:hover+.tRow.tCell{
边框颜色：#000；
}
特罗：第一个孩子{
宽度：10px；
光标：指针；
不透明度：1
}
.菜单{
显示：块；
高度：3倍；
宽度：3倍；
背景：#ccc；
位置：相对位置；
左边距：5px；
顶部：3px；
z指数：2；
}
.菜单：之前，
.菜单：之后{
显示：块；
高度：3倍；
宽度：3倍；
背景：#ccc；
位置：绝对位置；
内容：“；
顶部：-6px；
}
.菜单：之前{
顶部：-12px；
}
.行动{
显示：无；
位置：绝对位置；
空白：nowrap；
z指数：1；
左：0；
右：0；
利润上限：-19px；
背景：rgba（255，255，255，0.9）；
填充：5px 5px 5px 28px；
}
.t单元格：悬停。菜单：在，
.tCell:悬停。菜单：之后，
.tCell:悬停.菜单{
背景：#000
}
.tCell:悬停。操作{
显示：块
}

名称
年龄
性别
工作简介
|
凯莉
28
女性
网络开发者
|
杰克
32
男性
Java开发者
|
贾纳亚
26
女性
.Net开发人员
|
吉姆
24
男性
全堆栈开发程序

希望这对您有所帮助

使用

：before

覆盖单元格，并使用

~

操作符将单元格作为目标。我也有同样的要求。我就是这样处理的

正文{
保证金：0
}
.桌子{
显示：表格；
宽度：100%；
}
tHead先生，
特罗先生{
显示：表格行；
位置：相对位置；
}
特塞尔先生{
显示：表格单元格；
填充物：5px；
背景：#fff；
边框顶部：1px实心#ccc；
职位：相对
}
特罗：最后一个孩子{
边框底部：1px实心#ccc；
}
西亚德·特塞尔{
背景：#ccc；
}
特罗：悬停，特凯尔{
背景#f4；
边框颜色：#000；
}
特罗：以前{
内容：“；
位置：绝对位置；
身高：100%；
宽度：100%；
背景：rgba（255，255，255，0.9）；
排名：0；
左：0；
显示：无；
}
.tRow:hover+.tRow.tCell{
边框颜色：#000；
}
特罗：第一个孩子{
宽度：10px；
光标：指针；
不透明度：1
}
.菜单{
显示：块；
高度：3倍；
宽度：3倍；
背景：#ccc；
位置：相对位置；
左边距：5px；
顶部：3px；
z指数：3；
}
.菜单：之前，
.菜单：之后{
显示：块；
高度：3倍；
宽度：3倍；
背景：#ccc；
位置：绝对位置；
内容：“；
顶部：-6px；
}
.菜单：之前{
顶部：-12px；
}
.行动{
显示：无；
位置：绝对位置；
空白：nowrap；
z指数：4；
左：0；
右：0；
利润上限：-19px；
填充：5px 5px 5px 28px；
}
.t单元格：悬停。菜单：在，
.tCell:悬停。菜单：之后，
.tCell:悬停.菜单{
背景：#000
}
.tCell:悬停。操作{
显示：块
}
.tRow:hover.tCell:first child:hover:before，
.tRow:hover.tCell:first child:hover~.tCell:before{
显示：块；
}

名称
年龄
性别
工作简介
|
凯莉
28
女性
网络开发者
|
杰克
32
男性
Java开发者
|
贾纳亚
26
女性
.Net开发人员
|
吉姆
24
男性
全堆栈开发程序

@Tushar。。我注意到表的底线，div边框在悬停时从未更新

.tCell:hover.menu:before，
.tCell:悬停。菜单：之后，
.tCell:悬停.菜单{
背景：#000；
}

太好了……谢谢@TusharI更新了答案。将下边框从表更改为。tRow:最后一个子项。“它现在起作用了。@Tushar，我一直在玩这个，你的解决方案太棒了。”。。我不熟悉css3，它的细微差别。。但我一直在努力学习更多！！我已经习惯了CSS下的功能，现在我正在尝试如何实现我在表格模型下习惯的一些其他样式，例如更改交替行的颜色，.tRow:nth-child（）对我不起作用，我甚至没有尝试过椭圆长单元格。。如果有任何指向一个好的div表教程的指针或链接，我们将不胜感激！！一旦我问了这个问题，我就会得到正确的答案。。.tRow:nth child（奇数）.tCell{background color:#FCDFEB；}在选择所有实际工作和格式正在执行的子项时效果非常好：）