How to use mouseover and mouseout in Angular 6

Question

I have this older Angular code which works but not in the latest version of Angular 6.

        
                      

              相关标签:
       
      

Answer 1

CSS solution works without a glitch!

https://www.w3schools.com/code/tryit.asp?filename=GJ4PCJMVQ4LN https://www.w3schools.com/code/tryit.asp?filename=GJ4PPLCCEBRG

.col-info:hover>.popoverIcon {
    visibility: visible;
  }
}

.popoverIcon {
  visibility: hidden;
}

<div *ngFor="let i of [1,2,3,4]">

  <div class="col-info">
    <span class=" popoverIcon ">Show {{i}}</span>
  </div>

</div>

Answer 2

To avoid blinking problem use following code
its not mouseover and mouseout instead of that use mouseenter and mouseleave


**app.component.html**

    <div (mouseenter)="changeText=true" (mouseleave)="changeText=false">
      <span *ngIf="!changeText">Hide</span>
      <span *ngIf="changeText">Show</span>
    </div>

**app.component.ts**

@Component({
   selector: 'app-main',
   templateUrl: './app.component.html'
})
export class AppComponent {
    changeText: boolean;
    constructor() {
       this.changeText = false;
    }
}