mouseout() 不触发消失的物体

Question

发生了以下情况（参见 gif）

我展示了一个很棒的字体图标，它在 mouseenter() 和 mouseout()
单击按钮会隐藏图标并显示新元素。
返回并使旧元素出现，鼠标在技术上从未“离开”图标，因此仍然显示悬停状态的 fontawesome 图标。

有没有办法让 mouseout() 在元素消失时触发？因为从逻辑上讲，鼠标不再悬停在那个元素上了

这是代码，通过替换 fontawesome 前缀来更改图标。

<div (mouseover)="ratingEmojis.right='fas'" (mouseout)="ratingEmojis.right='far'" (click)="this.state.jumpToConfigStep(100)" class="iconButton"> 
  <fa-icon style='pointer-events: none' [icon]="[ratingEmojis.right, 'frown-open']" size="6x" ></fa-icon>
</div>

Answer 1

只需在触发 onclick 时将其更改为默认图标

Answer 2

我不确定 this.state.jumpToConfigStep(100) 的作用，但你可以这样做：

<div (mouseover)="ratingEmojis.right='fas'" (mouseout)="ratingEmojis.right='far'" (click)="rightClicked()" class="iconButton"> 
  <fa-icon style='pointer-events: none' [icon]="[ratingEmojis.right, 'frown-open']" size="6x" ></fa-icon>
</div>

rightClicked() {
   this.ratingEmojis.right = 'frown-open';
   this.state.jumpToConfigStep(100)
}

虽然大部分看起来可以用 css 和 :hover

来实现

mouseout() 不触发消失的物体

mouseout() not firing on disappearing objects

angular

mouseover

mouseleave