使表数据显示在悬停状态(javascript/jQuery或css）

Making table data appear on hover (javascript/jQuery or css)

本文关键字：javascript jQuery css 状态 数据 显示 悬停      更新时间：2023-09-26

当您将鼠标悬停在整行上时，我正试图让一些span标签（图标）出现在表格元素的各自单元格中

未悬停时的图像

悬停时的图像

我使用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;}

不起作用

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>

相关文章：