Question

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

是否有（CSS？）方式只显示表格的第一行，并且在鼠标悬停时出现某种形式的含义（即它在同一个tr中的td）？

Answer 1

之前已经问过这个问题，但是是的。你可以。

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>

Answer 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;
}

HTML缩略语表 - 在鼠标悬停时显示含义

2 个答案: