kexxcream kexxcream - 6 months ago 12
HTML Question

Show icon only on hover

I have a table that contains a column with an icon. I want the icons to be hidden by default, and only appear on hover.

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 Working Example:

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

Answer

There is no need to use javascript for this. Just a few lines of css will do:

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

And the updated fiddle: https://jsfiddle.net/bce9a257/3/

If you want the icons to show on hover of a row in stead of a cell, you could do that like this:

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

update:
Obviously you'll need to make that selector a bit more specific to only target the icons in your table. You could for example add an id to your table like flights and change those selectors to #flights i.fa (and #flights tr:hover i.fa)