css 如何使图标在html表格行中可见？

o4hqfura 于 2024-01-09 发布在其他

关注(0)|答案(2)|浏览(138)

我有一个HTML表格，有5列，在最后一列，如果我把鼠标悬停在表格上，3个图标将在单元格的末尾出现。
我唯一的问题是，我不希望这3个图标显示在每一行，只是在该行在我的鼠标是。我怎么才能解决这个问题？
我不能使用AngularJS，Angular Material，JavaScript或Bootstrap或任何第三方的东西。
我试着为每个图标使用一个跨度，但这并没有解决我的问题。
这是我表格中令人困惑的部分：

<tr *ngFor="let item of items">
      <td>
        <span class="normalColumn"> {{ item.firstname }}</span>
      </td>
      <td>
        <span class="normalColumn"> {{ item.lastname }}</span>
      </td>
      <td>
        <span class="normalColumn"> {{ item.email }}</span>
      </td>
      <td>
        <span class="normalColumn" *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>

字符串

css

来源：https://stackoverflow.com/questions/58822616/how-to-make-icons-visible-in-a-html-table-row

2条答案

按热度按时间

u4dcyp6a1#

试试这样：

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="normalColumn"> {{ item.firstname }}</span>
            </td>
            <td>
                <span class="normalColumn"> {{ item.lastname }}</span>
            </td>
            <td>
                <span class="normalColumn"> {{ item.email }}</span>
            </td>
            <td>
                <span class="normalColumn" *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>

字符串

赞(0）回复(0）举报 2024-01-09

ruoxqz4g2#

您只需要正确的选择器（在本例中为“sibling”combinator ~

td {
  border: 1px solid grey;
}

td:hover {
  background: lightgreen;
}

td span {
  visibility: hidden;
}

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

个字符

赞(0）回复(0）举报 2024-01-09

我来回答

css 如何使图标在html表格行中可见？

2条答案

相关问题

热门标签

最新问答