Показать значок только на hover

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> 

Minimal Рабочий пример:

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

обновление:
Очевидно, что вам нужно сделать, что селектор немного конкретнее только целевой иконки в таблице. Например, вы можете добавить идентификатор в таблицу, как flights и изменить эти селекторы #flights i.fa (и #flights tr:hover i.fa)