仅在悬停时显示图标

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（和#flights tr:hover i.fa）