Question

我有一个包含带图标的列的表。我希望默认情况下隐藏图标，并且只在悬停时显示。

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>

最小工作示例：

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

Answer 1

没有必要使用javascript。只需几行css即可：

app.get( '/index.html', isLoggedIn, function( req, res ) {
    req.session.test = 'Hello World !';
    console.log('=====');
    console.log(req.sessionID);
    console.log(req.session);
    res.sendFile( root + '/index.html' );
});

更新的小提琴：https://jsfiddle.net/bce9a257/3/

如果你希望图标显示在一行而不是单元格的悬停上，你可以这样做：

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

<强>更新
显然，您需要使该选择器更具体一些，只针对表中的图标。例如，您可以像i.fa { display: none; } tr:hover i.fa { display: inline-block; }一样在表格中添加ID，并将这些选择器更改为flights（和#flights i.fa）

仅在悬停时显示图标

1 个答案: