仅在悬停时显示图标

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

和更新的小提琴：https : //jsfiddle.net/bce9a257/3/

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

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

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