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

不需要Javascript / jQuery，只需使用CSS：

tr i {
    opacity: 0;
}

tr:hover i {
    opacity: 1;
}

Answer 2

您应该可以使用悬停执行此操作：

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

Answer 3

尝试类似：

td {
  padding: 10px;
  min-width: 100px;
}
tr {
  border-top: 1px solid;
}
table {
  border: 1px solid;
}
i {
  display: none;
}
tr:hover i {
  display: block;
}

<table>
  <tbody>
    <tr>
      <td>Lorem</td>
      <td>Ipsum</td>
      <td><i>button</i></td>
    </tr>
    <tr>
      <td>Dolor</td>
      <td>hello</td>
      <td><i>button</i></td>
    </tr>
    <tr>
      <td>Lorem</td>
      <td>Ipsum</td>
      <td><i>button</i></td>
    </tr>
  </tbody>
</table>

Answer 4

试试这个：

$("td").on("hover", function(){
    if($(this).find("i").is(":visible"))
        $(this).find("i").hide();
    else
        $(this).find("i").show();
});

Answer 5

基于this tutorial我创建了一个非常相似的指令，它不是检查父级是否悬停，而是检查祖父母（因为图标的父级是td元素，我想要{{1} }）。因此该指令如下：

tr

然后我的HTML元素如下所示：

Answer 6

绝对是CSS的方法。

但是，请考虑可访问性，如果可能，请将appDelegate添加到下载＆＃34;按钮＆＃34;如果它集中注意力就会出现，如下所示：

tabindex="0"

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

6 个答案: