Search code examples
angularmouseovermouseleave

mouseout() not firing on disappearing objects

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

enter image description here

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)" class="iconButton"> 
  <fa-icon style='pointer-events: none' [icon]="[ratingEmojis.right, 'frown-open']" size="6x" ></fa-icon>
</div>
Solution

  • 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()" 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)
}

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