Question

当您将鼠标悬停在整个行上时，我正在尝试使用某些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;}

不起作用

Answer 1

使用css的一种方法就是这样

以下代码段

＆＃13;

#table .icon{
    width:50px;
  height:50px;
  transition:all 0.5s;
  opacity:0;
}
#table .row:hover .icon{
  opacity:1;
}

＆＃13;

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

＆＃13;

使表格数据显示在悬停（javascript / jQuery或css）

1 个答案: