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:

/

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/bce9a257/1/

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited May 14, 2016 at 20:53 Pevara 14.3k11 gold badge3636 silver badges4848 bronze badges asked May 14, 2016 at 20:30 kexxcreamkexxcream 5,95388 gold badges4646 silver badges6262 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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