Add content to table cell using .css file-CodePudding

I would like to add content to table cells using .css file. The needed scenario is that when your (pc) mouse gets over the cell (:hover) the smiley face symbol (f.e. ☺) should appear in the cell.

Do you have any suggestions?

CodePudding user response：

You can use a pseudo element on each td when it is hovered which puts the smiley over the contents of the cell.

Note this is not putting content into the cell, it just visually looks like that.

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>

CodePudding user response：

in order to achieve what you are saying you must use bootstrap and bootstrap gives you a variety of icons that you can use. load the bootstrap in your script . use your icon https://icons.getbootstrap.com/icons/emoji-smile/ use the icon font listed on the above mentioned page. use placeholder property and insert the svg code in there.

if this doesn't work try doing it using java script https://linkpeek.com/blog/display-image-on-hover-using-html-javascript-and-css.html