javascript - 仅在悬停时显示图标

Question

我有一个表格，其中有一列带有一个图标。我希望图标默认隐藏，并且只在悬停时出现。

HTML代码:

<table class="table table-hover">
  <tr>
    <th>From</th>
    <th>To</th>
    <th>Connecting Airport</th>
    <th>Comment</th>
    <th>Report</th>
  </tr>
  <tr>
    <td>JFK</td>
    <td>CPH</td>
    <td>ARN</td>
    <td>N/A</td>
    <td><i class="fa fa-exclamation-triangle" title="Report outdated information" style="color:#da5450;"></i></td>
  </tr>
  <tr>
    <td>SFO</td>
    <td>EWR</td>
    <td>ORD</td>
    <td>N/A</td>
    <td><i class="fa fa-exclamation-triangle" title="Report outdated information" style="color:#da5450;"></i></td>
  </tr>
</table>

最小工作示例:

https://jsfiddle.net/bce9a257/1/

Answer 1

不需要为此使用 javascript。只需几行 css 即可:

i.fa {
  display: none;
}
td:hover i.fa {
  display: inline-block;
}

更新后的 fiddle :https://jsfiddle.net/bce9a257/3/

如果您希望图标悬停在一行而不是单元格上，您可以这样做:

i.fa {
  display: none;
}
tr:hover i.fa {
  display: inline-block;
}

更新:
显然，您需要使该选择器更具体一些，以便仅针对表格中的图标。例如，您可以向表中添加一个 id，如 flights，并将这些选择器更改为 #flights i.fa(和 #flights tr:hover i.fa)