Angular 2 Hover-Ereignis

1. Die Anwendungen mouseenter und mouseleave in Angular
2. Die Anwendungen mouseover und mouseout in Angular
3. Übergeben Sie mouseenter und mouseleave als Funktion in Angular

Wenn Sie mit der Maus über bestimmte Elemente auf dem Bildschirm fahren, erhalten Sie Zugriff auf Informationen, ohne zu klicken. Sie können sogar einige Funktionen für das Element ausführen, über das Sie Ihre Maus bewegen.

Dieser Artikel befasst sich mit einfachen Lösungen, um die Hover-Event-Funktion Mauszeiger auf Elementen auszuführen.

Wir werden die Funktionen mouseenter und mouseleave anwenden, um ein Hover-Ereignis zu erstellen. Die zweite Methode verwendet ebenfalls zwei Funktionen, nämlich mouseover und mouseout.

Wir werden dann einen fortgeschritteneren Ansatz anwenden, um ein Hover-Ereignis durchzuführen.

Die Anwendungen mouseenter und mouseleave in Angular

Bei Funktionen, die paarweise vorkommen, müssen wir Einträge für jede Funktion übergeben.

Wir verwenden die Funktion mouseenter, um anzugeben, was passiert, wenn wir mit der Maus über das Element fahren. Die Funktion mouseleave bestimmt dann, was beim Wegbewegen der Maus passiert.

Die HTML-Eingabe sieht so aus:

<div style="text-align: center;">
  <h2>Mouse Hover Event</h2>
</div>

<button
  class="btn-primary btn"
  (mouseenter)="showImage = true"
  (mouseleave)="showImage = false"
>
  Hover Over Me!
</button>

<br />

<img
  *ngIf="showImage"
  src="https://vangogh.teespring.com/v3/image/so-OI-9L5KAWsqHQuv6gQwymSQ8/480/560.jpg"
/>

Danach schreiben wir die app.component.ts wie folgt:

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;

  title = 'mouse-hover';
  showImage: boolean;

  constructor() {
    this.showImage = false;
  }
}

Die Anwendungen mouseover und mouseout in Angular

Die Attribute mouseover und mouseout arbeiten paarweise wie die zuvor erläuterte Methode, wir müssen nur die Funktionen vertauschen und voila:

<div style="text-align: center;">
  <h2>Mouse Hover Event</h2>
</div>

<button
  class="btn-primary btn"
  (mouseover)="showImage = true"
  (mouseout)="showImage = false"
>
  Hover Over Me!
</button>

<br />

<img
  *ngIf="showImage"
  src="https://vangogh.teespring.com/v3/image/so-OI-9L5KAWsqHQuv6gQwymSQ8/480/560.jpg"
/>

Übergeben Sie mouseenter und mouseleave als Funktion in Angular

Etwas kreativer und ausgefeilter werden wir mit der folgenden Methode, bei der wir die Ereignisse mouseenter und mouseleave als Funktion übergeben.

Das HTML wird leicht angepasst:

<div style="text-align: center;">
  <h2>Mouse Hover Event</h2>
</div>

<button
  class="btn-primary btn"
  (mouseover)="showImg(true)"
  (mouseleave)="showImg(false)"
>
  Hover Over Me!
</button>

<br />

<img
  *ngIf="showImage"
  src="https://vangogh.teespring.com/v3/image/so-OI-9L5KAWsqHQuv6gQwymSQ8/480/560.jpg"
/>

Und die app.component.ts auch:

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;

  title = 'mouse-hover';
  showImage: boolean;

  constructor() {
    this.showImage = false;
  }

  showImg(hover: boolean) {
    this.showImage = hover;
  }
}