javascript - 使表数据出现在悬停时(javascript/jQuery 或 css)

Question

当您将鼠标悬停在整行上时，我正在尝试让一些跨度标签(图标)出现在它们自己的表格元素单元格中

Image when not hovering

Image when hovering

我正在为此使用 CSS，但我也愿意使用 JS

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;}

没用

Answer 1

css的一种方式是这样的

下面的片段

#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/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>