Display transparent box on a HTML table row when mouse over (not highlight row)

Question

I want to display a transparent box (with some button on that) surround a table row which user mouse over. I searched on Google, but all pages just tell about how to highlight row when mouse over.

I use JavaScript to add mouse over event.

$('tr').on('mouseover', displayBox);

Can you help me solve this problem or give me some reference article?

For example:

Answer 1

The Overlay

We can create the overlay with a :before pseudo element — tbody tr td:first-child:before:

• It is given 100% width and will stretch the width of the row.

• It is given the same height as the td and will stretch the height of the row

• The table is made position: relative so that the cells :before child is positioned relative to the table and can stretch across the entire row.

The Buttons div

The buttons can be provided in a div of the last cell in each row — no javascript is needed. This will need to be tweaked slightly as they are offset slightly too low in Firefox.

• The div inside each rows last cell is hidden with opacity until the row is hovered. When hovered it is shown with:

  tr:hover td > div {
      opacity: 1;
  }
  

• The td:last-child is made position: relative so that the overlay div which has position: absolute will be positioned relative to its parent td

Working Example

* {
  box-sizing: border-box;
}
table,
tr td:last-child {
  position: relative;
}
th,
td {
  padding: 0 10px;
  height: 2em;
}
td > div {
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s;
  right: 0;
  top: 0.5em;
  /* 1/4 height of td*/
  height: 2em;
  /*height of td*/
}
tr:hover td > div {
  opacity: 1;
}
tbody tr td:first-child:before {
  width: 100%;
  content: '';
  display: block;
  height: 2em;
  position: absolute;
  background: rgba(0, 0, 0, 0);
  margin-top: -6px;
  /* off set space above text */
  left: 0;
  transition: background 0.5s;
}
tbody tr:hover td:first-child:before {
  background: rgba(0, 0, 0, 0.6);
}
td > div > a {
  margin: 0 0.25em 0 0;
  background: #1DE9B6;
  color: #FFF;
  text-decoration: none;
  border-radius: 2px;
  padding: 3px;
  transition: color 0.5s, background 0.5s;
}
/*Not important -- example only*/

td > div > a:hover {
  background: #A7FFEB;
  color: #000;
}
table {
  border-collapse: collapse;
  border: solid 1px #EEE;
}
th,
td {
  border: solid 1px #EEE;
  transition: background 0.5s;
}
tr:nth-child(even) {
  background: #E3F2FD;
}

<table>
  <thead>
    <tr>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content
        <div><a href="#">Action</a><a href="#">Action</a><a href="#">Action</a></div>
      </td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content
        <div><a href="#">Action</a><a href="#">Action</a><a href="#">Action</a></div>
      </td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content
        <div><a href="#">Action</a><a href="#">Action</a><a href="#">Action</a></div>
      </td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
      <td>Content
        <div><a href="#">Action</a><a href="#">Action</a><a href="#">Action</a></div>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">Footer</td>
    </tr>
  </tfoot>
</table>