jquery - 悬停行时显示/隐藏行中的元素

Question

我有一个使用 angular-datatables 创建的 HTML 表格。表格的 HTML 看起来像这样

<table ng-if="devicesLoaded()" datatable="ng" class="device-table table table-hover" 
           dt-options="dtOptions" dt-column-defs="dtColumnDefs">
    <thead>
        <tr>
            <th>Id</th>
            <th ng-repeat="key in getParametersColumns()">{{key | capitalize}}</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr class="no-border" ng-repeat="item in data">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.description}}</td>
            <td>{{item.type}}</td>
            <td>
                <i class="fa fa-download action-icon" tooltip="Download" 
                   ng-click="Download(item)">
                </i>
            </td>
        </tr>
    </tbody>    
</table>

我想要 <i>元素(下载按钮)仅在悬停特定行时出现。请注意 - 不仅在将鼠标悬停在特定元素或 td 上时，而且在将鼠标悬停在行中的每个点上时。

Answer 1

您应该能够通过悬停来执行此操作:

tr.no-border i.action-icon{
   display:none;
}
tr.no-border:hover i.action-icon{
   display:block;
}