Zeige nur beim Schweben Symbol

Question

Ich habe eine Tabelle, die eine Spalte mit einem Symbol enthält. Ich möchte, dass die Symbole standardmäßig ausgeblendet werden und nur bei Hover angezeigt werden.

HTML-Code:

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

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

Answer 1

Es gibt keine Notwendigkeit Javascript für diese zu verwenden. Nur ein paar Zeilen CSS tun:

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

Und die aktualisierte Geige: https://jsfiddle.net/bce9a257/3/

Wenn Sie die Symbole auf Hover einer Zeile anstelle einer Zelle zeigen wollen, können Sie das tun, wie diese :

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

Update:
Offensichtlich werden Sie die Symbole in der Tabelle vornehmen müssen zielen, die Wähler ein bisschen mehr spezifisch nur. Sie könnten zum Beispiel einer ID auf den Tisch wie flights hinzuzufügen und Selektoren #flights i.fa (und #flights tr:hover i.fa)