如何使图标在 html table 行中可见？

Question

我有一个有 5 个栏的 HTML table，在最后一栏，如果我将鼠标悬停在 table 上，3 个图标将出现在栏的末尾细胞.

我唯一的问题是我不希望这 3 个图标出现在每一行中，就在我的鼠标所在的行中。我该如何解决？

我不能使用 AngularJS、Angular Material、JavaScript 或 Bootstrap 或任何第 3 方的东西。

我尝试为每个图标使用跨度，但这并没有解决我的问题。

这是我的 table 令人困惑的部分：

<tr *ngFor="let item of items">
      <td>
        <span class="normalColoumn"> {{ item.firstname }}</span>
      </td>
      <td>
        <span class="normalColoumn"> {{ item.lastname }}</span>
      </td>
      <td>
        <span class="normalColoumn"> {{ item.email }}</span>
      </td>
      <td>
        <span class="normalColoumn" *ngFor="let roleId of item.roleIds">
          {{ getUserRole(roleId).name }}</span
        >
      </td>
      <td>
        <span class="left">
          {{
            item.lastLoginDate
              ? (item.lastLoginDate | fromnow)
              : ('USER_MANAGEMENT.UNKNOWN_LAST_LOGIN' | translate)
          }}
        </span>
        <span class="only-show-on-hover">
          <my-icon [icon]="Icon.edit"></my-icon>
          <my-icon [icon]="Icon.password"></my-icon>
          <my-icon [icon]="Icon.delete"></my-icon>
        </span>
      </td>
    </tr>

Answer 1

这样试试：

Working Demo

<table class="table table-bordered">
    <ng-container *ngFor="let item of items;let i = index">
        <tr (mouseover)="rowIndex = i" (mouseleave)="rowIndex = null">
            <td>
                <span class="normalColoumn"> {{ item.firstname }}</span>
            </td>
            <td>
                <span class="normalColoumn"> {{ item.lastname }}</span>
            </td>
            <td>
                <span class="normalColoumn"> {{ item.email }}</span>
            </td>
            <td>
                <span class="normalColoumn" *ngFor="let roleId of item.roleIds">
          {{ getUserRole(roleId).name }}</span>
            </td>
            <td>
                <span class="left">
          {{
            item.lastLoginDate
              ? (item.lastLoginDate | fromnow)
              : ('USER_MANAGEMENT.UNKNOWN_LAST_LOGIN' | translate)
          }}
        </span>
                <span class="only-show-on-hover" *ngIf="rowIndex == i">
          <my-icon [icon]="Icon.edit"></my-icon>
          <my-icon [icon]="Icon.password"></my-icon>
          <my-icon [icon]="Icon.delete"></my-icon>
        </span>
            </td>
        </tr>
    </ng-container>
</table>

Answer 2

在这种情况下，您只需要正确的选择器 "sibling" 组合器 ~

td {
  border: 1px solid grey;
}

td:hover {
  background: lightgreen;
}

td span {
  visibility: hidden;
}

td:hover~td span,
td:hover span {
  visibility: visible;
  background: lightblue;
}

<table>
  <tr>
    <td>Hover Me</td>
    <td>Hover Me</td>
    <td>Hover Me</td>
    <td>Hover Me</td>
    <td><span>Icons</span></td>
  </tr>
  <tr>
    <td>Hover Me</td>
    <td>Hover Me</td>
    <td>Hover Me</td>
    <td>Hover Me</td>
    <td><span>Icons</span></td>
  </tr>
</table>

如何使图标在 html table 行中可见？

How to make icons visible in a html table row?

html

css

hover

typescript

angular