时间戳

首页 > 解决方案 > 使用 .css 文件将内容添加到表格单元格

html - 使用 .css 文件将内容添加到表格单元格

问题描述

我想使用 .css 文件向表格单元格添加内容。所需的情况是，当您的（pc）鼠标移过单元格（：悬停）时，笑脸符号（fe☺）应该出现在单元格中。

你有什么建议吗？

标签： htmlcsshtml-table

解决方案

您可以在每个 td 悬停时在每个 td 上使用伪元素，这会将笑脸放在单元格的内容上。

请注意，这不是将内容放入单元格中，它只是在视觉上看起来像这样。

td {
  height: 10vmin;
  width: 10vmin;
  border: solid 1px black;
  position: relative;
}

td:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  background-image: url('https://i.stack.imgur.com/Fw13s.png');
  background-size: contain;
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  z-index: 1;
}
<h3>Hover over any cell</h3>
<table>
  <tr>
    <td>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
    </td>
  </tr>
</table>

推荐阅读