The following is happening (see gif)

1. I show a fontawesome icon that changes on mouseenter() and mouseout()
2. Clicking a button hides the icons and makes new elements appear.
3. Going back and making the old elements appear, the mouse technically never "left" the icons, so the fontawesome icon for the hovering state is still displayed.

Isn't there a way to have mouseout() firing whenever an element disappears? Because logically, the mouse isn't hovering that element anymore then

Here is the code, changing the icons is done by replacing the fontawesome prefix.

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

CodePudding user response：

I'm not sure what this.state.jumpToConfigStep(100) does but you could do this:

<div (mouseover)="ratingEmojis.right='fas'" (mouseout)="ratingEmojis.right='far'" (click)="rightClicked()" > 
  <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)
}

Though most of this looks like it could be achieved with css and :hover

CodePudding user response：

Just change it to default icon when onclick is fired