修复悬停表格覆盖问题：含hover/tooltip事件的表格开发求助

我明白你遇到的麻烦了——当鼠标悬停在.ttip元素上弹出带链接的tooltip表格时，第一个tooltip里的链接根本点不了，因为被后面的.ttip元素给挡住了对吧？这是因为同级元素在文档流里默认的堆叠层级一致，后面的元素会覆盖前面的内容。下面给你几个简单有效的解决方案：

方案一：CSS调整堆叠层级（最简单） #

只需要修改你的CSS，给hover状态下的.ttip添加z-index，让当前触发hover的元素层级高于其他同级元素，这样它的tooltip就会显示在最上层：

.ttip {
  position: relative;
  display: table;
  /* 可选：给每个ttip加个间距，避免太挤 */
  margin: 10px 0;
}

.ttip>table {
  position: absolute;
  white-space: nowrap;
  border-collapse: collapse;
  display: none;
  /* 给tooltip加个背景，避免和下面内容混在一起 */
  background: #fff;
}

.ttip>table td {
  border: 1px dotted #000;
  padding: 2px;
}

.ttip:hover {
  **关键：hover时提升当前元素的堆叠层级**
  z-index: 1;
}

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

为什么这个方法有效？ #

因为.ttip是position: relative定位的，设置z-index后会创建新的堆叠上下文，hover时的.ttip层级比其他未hover的高，它内部的绝对定位tooltip自然就不会被后面的元素挡住了。给tooltip加白色背景，还能避免和下方内容重叠导致的视觉混乱。

方案二：JavaScript动态控制（更灵活） #

如果你需要更复杂的交互逻辑，比如点击其他地方关闭tooltip、自定义显示/隐藏动画，可以用JS来实现：

<div class="ttip">
  <a class="foo">FOO</a>
  <table class="tooltip-content">
    <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 class="tooltip-content">
    <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;
  margin: 10px 0;
}

.tooltip-content {
  position: absolute;
  white-space: nowrap;
  border-collapse: collapse;
  display: none;
  background: #fff;
}

.tooltip-content td {
  border: 1px dotted #000;
  padding: 2px;
}

.ttip.active .tooltip-content {
  display: table;
}

.ttip.active {
  z-index: 1;
}

const ttipElements = document.querySelectorAll('.ttip');

ttipElements.forEach(ttip => {
  // 鼠标进入时显示tooltip并提升层级
  ttip.addEventListener('mouseover', () => {
    // 先移除所有active类，避免多个tooltip同时显示
    ttipElements.forEach(el => el.classList.remove('active'));
    ttip.classList.add('active');
  });
  
  // 鼠标离开时隐藏tooltip
  ttip.addEventListener('mouseout', () => {
    ttip.classList.remove('active');
  });
});

// 可选：点击页面其他地方关闭所有tooltip
document.addEventListener('click', (e) => {
  if (!e.target.closest('.ttip')) {
    ttipElements.forEach(el => el.classList.remove('active'));
  }
});

这个方案通过添加/移除active类来控制tooltip的显示，同时动态调整z-index，还能扩展更多交互，比如点击外部关闭tooltip，体验更流畅。

内容的提问来源于stack exchange，提问作者tulptuiz