Showing/hiding 悬停行时行中的元素

Question

我有一个 HTML table 是我使用 angular-datatable 创建的。 table 的 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

试试这个：

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

Answer 2

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

tr i {
    opacity: 0;
}

tr:hover i {
    opacity: 1;
}

Answer 3

基于 this tutorial 我创建了一个非常相似的指令，它不是检查父元素是否悬停，而是检查祖父元素（因为图标的父元素是 td 元素，我想要 tr).所以指令看起来如下：

angular.module('my.directives').directive('showOnGrandparentHover',
   function() {
      return {
         link : function(scope, element, attrs) {
            element.hide(); // Start with icon hidden
            element.parent().parent().bind('mouseenter', function() {
               element.show();
            });
            element.parent().parent().bind('mouseleave', function() {
               element.hide();
            });
       }
   };
});

然后我的 HTML 元素看起来像这样：

Answer 4

您应该可以通过悬停来执行此操作：

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

Answer 5

试试这样的东西：

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 6

绝对 CSS 是正确的选择。

但是，请考虑可访问性，如果可能的话，请将 tabindex="0" 添加到下载 "button" 并使其在聚焦时显示，如下所示：

tr i[ng-click] {
  opacity: 0;
}

tr:hover i[ng-click],
tr i[ng-click]:focus {
  opacity: 1;
}

Showing/hiding 悬停行时行中的元素

Showing/hiding elements in row when hovering the row

jquery

html

css

angularjs

font-awesome