我有一个包含 5 列的 HTML 表格,在最后一列中,如果我将鼠标悬停在表格上,单元格末尾将出现 3 个图标。
我唯一的问题是我不希望这 3 个图标出现在每一行中,就在我的鼠标所在的行中。我该如何解决这个问题?
我不能使用 AngularJS、Angular Material、JavaScript 或 Bootstrap 或任何第 3 方的东西。
我尝试为每个图标使用跨度,但这并没有解决我的问题。
这是我表格中令人困惑的部分:
<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>
最佳答案
像这样尝试:
<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>
关于html - 如何使图标在 html 表格行中可见?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58822616/