修复了覆盖悬停的桌子/桌子的悬停问题

Question

我在创建表时遇到问题。我需要创建一个带有悬停/工具提示事件的一些单元格的表。例如，当我指向单元格时，我需要显示一个带有链接的列表，但当这样做时，我会遇到重叠的问题(我不能使用第一个单元格中的链接(。目前我只尝试使用CSS和HTML，但JS解决方案也被接受。

HTML:

<div class="ttip">
<a class="foo">FOO</a>
<table>
<tr>
<td><a href='bar'>Bar</a></td>
</tr>
<tr>
<td><a href='baz'>Baz</a></td>
</tr>
</table>
</div>
<div class="ttip">
<a class="foo">FOO2</a>
<table>
<tr>
<td><a href='bar2'>Bar2</a></td>
</tr>
<tr>
<td><a href='baz2'>Baz2</a></td>
</tr>
</table>
</div>

样式：

.ttip {
position: relative;
display: table;
}
.ttip>table {
position: absolute;
white-space: nowrap;
border-collapse: collapse;
display: none;
}
.ttip>table td {
border: 1px dotted #000;
padding: 2px;

}
.ttip:hover>table {
display: table;
}

实时：

https://jsfiddle.net/uLm0gjcn/3/

问候

Answer 1

FOO2在FOO之后渲染，这意味着当它被显示时，它在技术上低于FOO2文本。要修复此问题，您需要在.ttip>table中的css中应用z-index

.ttip>table {
position: absolute;
white-space: nowrap;
border-collapse: collapse;
display: none;
z-index: 1;
}

这样，当下拉/工具提示从FOO中显示时，它将在FOO2的顶部进行渲染。

编辑。此外，为了使其不透明，请将background-color应用于.ttip>table中的css。例如对于白色背景background-color: white;