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

Posted 2023-03-06

【中文标题】使用 .css 文件向表格单元格添加内容

【英文标题】：Add content to table cell using .css file

【发布时间】：2021-11-18 01:23:51

【问题描述】：

我想。所需的情况是，当您的 (pc) 鼠标经过单元格 (:hover) 时，笑脸符号 (f.e. ☺) 应该出现在单元格中。

你有什么建议吗？

【问题讨论】：

希望您至少尝试自己编写代码。我建议你做一些additional research，通过谷歌或搜索SO，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

嗨@Paulie_D，我不需要你的任何代码，我已经有了自己的代码，我所需要的只是一个标签或命令，它将我的单元格的内容设置为某些东西，例如笑脸......就是这样;) :)

我们希望看到您声称拥有的一些代码。也许您尝试使用:hover 伪选择器来制作笑脸？或者可能是您在研究中看到的一些 Stack Overflow 问题的链接？

好吧，伙计们，我会慢慢来，我发布了这个问题，因为我找不到另一个相同或接近的问题，现在清楚了吗？

【参考方案1】：

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

【讨论】：

酷，漂亮，干净的方式如何实现我的目标，谢谢！ :O