我有一个包含5个列的HTML表,在最后一个列中,如果将鼠标悬停在表上,则在单元格末尾会出现3个图标。
我唯一的问题是我不希望这3个图标显示在每行中,而是显示在鼠标所在的行中。我该怎么解决?
我绝对不能使用AngularJS,Angular Material,JavaScript或Bootstrap或任何第三方的东西。
我尝试为每个图标使用一个跨度,但这不能解决我的问题。
这是我桌中令人困惑的部分:
<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>