在悬停时更改离子图标

Question

是否可以在不通过组件的情况下更改悬停图标？

  <button ion-button icon-only #lock (mouseover)="lock.isHover = true" (mouseout)="lock.isHover = false">
    <ion-icon *ngIf="lock.isHover" name="lock"></ion-icon>
    <ion-icon *ngIf="!lock.isHover" name="unlock"></ion-icon>
  </button>

Answer 1

根据代码示例，我不确定我是否正确理解了您的问题。 您可以使用三元组根据lock.isHover的值更改名称值。

  <button ion-button icon-only #lock (mouseover)="lock.isHover = true" (mouseout)="lock.isHover = false">
    <ion-icon [name]="lock.isHover ? 'lock' : 'unlock'"></ion-icon>
  </button>

如果您尝试仅为了视觉目的进行更改，我会使用css路径：

  button:hover ion-icon{
   // css styling for hover state
  }   

Answer 2

我建议改用（mouseenter）和（mouseleave）。这样，事件就很清楚了。 “鼠标悬停”可能导致图标快速来回切换。