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

i want display transparent box (with button on that) surround table row user mouse over. searched on google, pages tell how highlight row when mouse over.

i use javascript add mouse on event.

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

can me solve problem or give me reference article?

for example:

the overlay

we can create overlay :before pseudo element — tbody tr td:first-child:before:

• it given 100% width , stretch width of row.

• it given same height td , stretch height of row

• the table made position: relative cells :before child positioned relative table , can stretch across entire row.

the buttons div

the buttons can provided in div of last cell in each row — no javascript needed. need tweaked offset low in firefox.

• the div inside each rows last cell hidden opacity until row hovered. when hovered shown with:

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

• the td:last-child made position: relative overlay div has position: absolute positioned relative 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 > {    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>