HTML 首字母缩略词表 - 在鼠标悬停时显示含义答案

【问题标题】：HTML Table of Acronyms - show meaning on mouseoverHTML 首字母缩略词表 - 在鼠标悬停时显示含义
【发布时间】：2017-09-05 13:19:03
【问题描述】：

我有一个包含 2 列和大约 80 行的 HTML 表，其中包含首字母缩略词及其含义。

是否有一种（CSS？）方法可以只显示表格的第一行，并且在鼠标悬停时会在某种框中显示含义（即它在同一个 tr 中伴随 td）？

【问题讨论】：

可能......你在研究中发现了什么，你尝试了什么？
目前还没有，我刚刚开始寻找，它直接用 JS 处理单个项目，但我之前没有对整张桌子这样做过。
希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，通过谷歌或搜索SO，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

标签： css css-tables

【解决方案1】：

以前有人问过这个问题，但是是的。可以的。

JSfiddle

CSS：

.meaning {
  display:none;
}
.Acronym:hover + .meaning {
  display:unset;  
}

HTML：

<table>
<tbody>
  <tr><td class="Acronym">Foo</td><td class="meaning">bar</td></tr>
  <tr><td class="Acronym">Foo2</td><td class="meaning">bar2</td></tr>
</tbody>
</table>

【讨论】：

这看起来很简单 - 谢谢！
请注意，这仅适用于meaning 跟在acronym 之后的情况。也就是说，您只能像这样选择以下兄弟姐妹。如果有意义的话，它不适用于以前的兄弟姐妹。

【解决方案2】：

只有使用 :hover 选择器的 css 才能做到这一点。

这是一个带有工具提示的单元格示例，每个.cell 都可以是表格中的<td>。

Codepen

html

<span class="cell">
  acr.
  <div class="tooltip">Acronym</div>
</span>

css

.cell {
  border: 1px solid black;
  padding: 5px 10px;
}

.cell .tooltip {
  position: absolute;
  opacity: 0;
  transition: opacity 250ms;
  border: 1px solid grey;
  background-color: white;
  padding: 2px;
}

.cell:hover .tooltip {
  display: block;
  opacity: 1;
}

【讨论】：

这不能回答 OP 的问题，因为它要求含义在 inside 首字母缩略词的td，而 OP 在相邻的td 中具有含义。
它实际上并没有解决我的确切问题，但通过一些查找和替换它可以提供更好的 UI/UX，而不仅仅是显示/隐藏含义 td。
很公平。祝你好运，别忘了接受你选择的答案。