Ad

Making Table Data Appear On Hover (javascript/jQuery Or Css)

- 1 answer

I'm trying to have some span tags (icons) that are each in their own cells of a table element appear when you hover over the entire row

Image when not hovering

Image when hovering

I am using CSS for this but am open to using JS as well

HTML

<div class="row1">
    <tr>
        <td>
            <div class="checkbox">
              <label class="checkbox-inline">
                <input type="checkbox" id="inlineCheckbox1" value="option1">
              </label>
            </div>
        </td>
        <td><img id="preview1" src="images/dummyQueuePreview.png"></td>
        <td id="user1">Emma R.</td>
        <td id="fileName1">Ethanol v1.2</td>
        <td>Physical Science 1</td>
        <td>12/08/2105 - 13:46</td>
        <span class="optionTray">
            <td><span class="icon-bubble" style="font-size:30px;" id="bubble"></span></td>
            <td><span class="icon-stack" style="font-size:30px;"></span></td>
            <td><span class="icon-pencil" style="font-size:30px;"></span></td>
            <td><span class="icon-bin" style="font-size:30px;"></span></td>
            <td><span class="icon-checkbox-checked" style="font-size:30px;"></span></td>
        </span>
    </tr>
</div>

CSS

.optionTray{ display: none;}  .row1:hover .optionTray{display : block;}

It doesn't work

Ad

Answer

One way with css is like this

Snippet below

#table .icon{
    width:50px;
  height:50px;
  transition:all 0.5s;
  opacity:0;
}
#table .row:hover .icon{
  opacity:1;
}
<table id='table'>
<tr class='row'>
  <td>Emma</td>
  <td>Ethanol</td>
  <td>Physical Science</td>
  <td>date</td>
  <td><img src='https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQyODNgIBQEVpEbju8f7473DbeKSSmCfjzzfrtRRykKzJXnQJsmOw' class='icon'></td>
  <td><img src='https://encrypted-tbn0.gstatic.com/imazzfrtRRykKzJXnQJsmOw' class='icon'></td>
  <td><img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7j4zeqZB4theKrjb13e8XwhXXYpumwYEzTvhYclxrSrzS_5yJ' class='icon'></td>
    <td><img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7j4zeqZB4theKrjb13e8XwhXXYpumwYEzTvhYclxrSrzS_5yJ' class='icon'></td>
</tr>
<tr class='row'>
  <td>Books</td>
  <td>Buildings</td>
  <td>Girls</td>
  <td>RUm</td>
  <td><img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQZ0tgKhKWQ5bHf6Mvsz1FpLSxRLvSiQdHPtUIbOgi9UuQSfnobPg' class='icon'></td>
  <td><img src='https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRaZN_Sne_mJmC3Ls8pgo0LF63aNKq5IfTZKyfqUvFLdyd3WvgKLw' class='icon'></td>
    <td><img src='https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRaZN_Sne_mJmC3Ls8pgo0LF63aNKq5IfTZKyfqUvFLdyd3WvgKLw' class='icon'></td>
</tr>

</table>

Ad
source: stackoverflow.com
Ad