在 Angular / HTML 中，如何在鼠标悬停时在表格中显示图标答案

【问题标题】：In Angular / HTML, how to show icons on mouseover in a table在 Angular / HTML 中，如何在鼠标悬停时在表格中显示图标
【发布时间】：2020-02-27 00:01:51
【问题描述】：

我有自己的 Icon 组件，所以它不是普通的 html img-src 或 fa fa-icon。我必须使用这个组件。（而且我也不能使用 Bootstrap 或类似的东西。）

所以我的问题是：

我有一个表格，如果我将鼠标悬停在单元格上，在最后一列中应该会出现 3 个小图标，当我的鼠标离开单元格时，它们应该会消失。

虽然我可以用 div 和 *ngIf="(mouseOver)" 或类似的东西来解决这个问题，但它不起作用。

有什么解决办法吗？

（由于公司原因，无法显示代码）

【问题讨论】：

某些代码由于是公司的财产而无法共享，这是可以理解的，但是您应该能够创建一个最小的、可复制的示例，说明您的目标和您面临的问题而无需共享任何受保护的代码。
@Tom 好吧，这里有一些代码我可以给你看，这是表格的最后一列，单元格的右侧是最后登录日期（关于用户的表格）右边是我的图标。
@Tom {{ item.lastLoginDate ? (item.lastLoginDate | fromnow) : ('USER_MANAGEMENT.UNKNOWN_LAST_LOGIN' | translate) }} 显然（鼠标悬停）部分不正确，但我想要这样的东西。
@kameholic1582 请考虑编辑您的帖子以包含您作为评论粘贴的代码。

【解决方案1】：

您可以使用 mouseenter 和 mouseleave 将事件作为参数传递来触发当前元素。

HTML：

<div>
   <my-icon (mouseenter)="showMyIcons($event) (mouseenter)="hideMyIcons($event)"></my-icon>
</div>

TS：

showMyIcons(event) {
   event.target.classList.remove('hidden')
}

hideMyIcons(event) {
   event.target.classList.add('hidden')
}

CSS：

.hidden {
   opacity:0;
   visibility: hidden;
 }

【讨论】：

【解决方案2】：

我解决了，显然只有在这样的 css 中：

div span.only-show-on-hover {
  visibility: hidden;
  float: right;
}
div:hover span.only-show-on-hover {
  visibility: visible;
}

感谢您的回答，我不知道为什么我之前没有找到这个解决方案。

【讨论】：

【解决方案3】：

HTML：

<div (mouseenter) ="mouseEnter() "  (mouseleave) ="mouseLeave()">
        HOVER ME!
        <h1 [hidden]="!iconVisible">ICON</h1>
 </div>

还有组件：

mouseEnter() {
  console.log("mouse enter");
  this.iconVisible = true;
}

mouseLeave() {
  console.log("mouse leave");
  this.iconVisible = false;
}

在jsfiddle 中尝试一下。

【讨论】：

【解决方案4】：

一种方法是将图标的颜色设置为透明并添加一个 CSS 悬停，在其中将其更改为可见颜色。悬停应该添加到 td.由于我看不到您的代码，因此我无法更具体，但不需要角度代码。

您可以为这些图标设置可见性：隐藏和可见性：可见。如果光标在 td 上方，我假设您希望它们出现。我会围绕它们创建一个包装器，例如：

html:

<td>
   <div class="wrapper">
    icons..
   </div>
</td>

css:

.wrapper{
    visibility: hidden;
}
.wrapper:hover{
    visibility: visible;
}

【讨论】：