angular mouseenter
<div (mouseover)="changeText=true" (mouseout)="changeText=false">
<span *ngIf="!changeText">Hide</span>
<span *ngIf="changeText">Show</span>
</div>angular mouseenter
<div (mouseover)="changeText=true" (mouseout)="changeText=false">
<span *ngIf="!changeText">Hide</span>
<span *ngIf="changeText">Show</span>
</div>angular mouseenter
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;
}
}angular mouseenter
<mat-list dense>
<ng-template ngFor let-message [ngForOf]="conversation?.messages" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
<mat-list-item (mouseenter)="enter(i)" (mouseleave)="leave(i)" class="chat-message-body" *ngIf="auth._id === message.author._id"
fxLayoutAlign="" dir="rtl">
<img matListAvatar class="img-box" src="http://via.placeholder.com/30x30" alt="...">
<button mat-icon-button *ngIf="hoverIndex == i">
<mat-icon aria-label="">keyboard_arrow_down</mat-icon>
</button>
<div matLine>
<b>{{message.author.profile.username}} </b>
<span>{{message.created_at | date:'shortTime'}} </span>
</div>
<span matLine> {{message.body}} </span>
</mat-list-item>
</ng-template>
</mat-list>angular mouseenter
<div (mouseover)="changeText=true" (mouseout)="changeText=false">
<span [hidden]="changeText">Hide</span>
<span [hidden]="!changeText">Show</span>
</div>angular mouseenter
enter(i) {
this.hoverIndex = i;
}
leave(i) {
this.hoverIndex = null;
}angular mouseenter
div span.only-show-on-hover {
visibility: hidden;
}
div:hover span.only-show-on-hover {
visibility: visible;
}angular mouseenter
import { Directive, OnInit, ElementRef, Renderer2 ,HostListener,HostBinding,Input} from '@angular/core';
import { MockNgModuleResolver } from '@angular/compiler/testing';
//import { Event } from '@angular/router';
@Directive({
selector: '[appBetterHighlight]'
})
export class BetterHighlightDirective implements OnInit {
defaultcolor :string = 'black'
Highlightedcolor : string = 'red'
@HostBinding('style.color') color : string = this.defaultcolor;
constructor(private elm : ElementRef , private render:Renderer2) { }
ngOnInit()
{}
@HostListener('mouseenter') mouseover(event :Event)
{
this.color= this.Highlightedcolor ;
}
@HostListener('mouseleave') mouseleave(event: Event)
{
this.color = this.defaultcolor;
}
}angular mouseenter
<div *ngFor="let i of [1,2,3,4]" > hover me please.
<span class="only-show-on-hover">you only see me when hovering</span>
</div>angular mouseenter
@Component({
selector: 'app-main',
templateUrl: './app.component.html'
})
export class AppComponent {
changeText: boolean;
constructor() {
this.changeText = false;
}
}angular mouseenter
changeText:boolean=true;Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
