使用 .css 文件向 table 单元格添加内容

Question

我想使用 .css 文件向 table 单元格添加内容。所需的场景是，当您的 (pc) 鼠标越过单元格 (:hover) 时，笑脸符号 (f.e。☺) 应该出现在单元格中。

你有什么建议吗？

Answer 1

您可以在每个 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>

使用 .css 文件向 table 单元格添加内容

Add content to table cell using .css file

html

css

html-table