Javascript 仅在悬停时显示图标

我有一个表，其中包含一个带有图标的列。我希望图标在默认情况下隐藏，并且只显示在悬停状态

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>

从…起
到
中转机场
评论
报告
肯尼迪
CPH
阿恩
不适用
SFO
EWR
作战需求
不适用

最小工作示例：

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

---

这不需要使用javascript。只需几行css即可：

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

和最新的小提琴：

如果希望图标显示在行的悬停位置而不是单元格上，可以这样做：

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

更新：

---

显然，您需要使该选择器更具体一些，以便只针对表中的图标。例如，您可以向表中添加一个id，如

flights

，并将这些选择器更改为

#flights i.fa

（和

#flights tr:hover i.fa

）

无需使用javascript。只需几行css即可：

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

和最新的小提琴：

如果希望图标显示在行的悬停位置而不是单元格上，可以这样做：

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

更新：

---

显然，您需要使该选择器更具体一些，以便只针对表中的图标。例如，您可以向表中添加一个id，如

flights

，并将这些选择器更改为

#flights i.fa

（和

#flights tr:hover i.fa

）

如果此解决方案可能会影响屏幕上的所有其他图标，则最好使用css而不是js>page@kexxcream不是什么问题，只是让选择器更具体一点的问题。看看更新。当这个解决方案可能出现的问题是它会影响屏幕上的所有其他图标时，最好使用css而不是jspage@kexxcream这不是一个真正的问题，只是让选择器更具体一点的问题。看看更新。