Evento Hover de Angular 2

1. Las aplicaciones mouseenter y mouseleave en Angular
2. Las Aplicaciones mouseover y mouseout en Angular
3. Pasar el mouseenter y mouseleave como Función en Angular

Cuando pasa el mouse sobre ciertos elementos en la pantalla, obtiene acceso a la información sin hacer clic. Incluso puede realizar algunas funciones en el elemento sobre el que pasa el mouse.

Este artículo analiza soluciones simples para llevar a cabo la función de evento de desplazamiento del mouse sobre los elementos.

Aplicaremos las funciones mouseenter y mouseleave para crear un evento flotante. El segundo método también utilizará dos funciones, a saber, mouseover y mouseout.

Luego aplicaremos un enfoque más avanzado para llevar a cabo un evento de desplazamiento.

Las aplicaciones mouseenter y mouseleave en Angular

Cuando se trata de funciones que vienen en pares, necesitamos pasar entradas para cada función.

Usamos la función mouseenter para declarar lo que sucede cuando pasamos el mouse sobre el elemento. La función mouseleave determina lo que sucede al alejar el mouse.

La entrada HTML se verá así:

<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"
/>

Luego, escribiremos el app.component.ts como a continuación:

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;
  }
}

Las Aplicaciones mouseover y mouseout en Angular

Los atributos mouseover y mouseout funcionan en pares como el método explicado anteriormente, solo necesitamos cambiar las funciones y listo:

<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"
/>

Pasar el mouseenter y mouseleave como Función en Angular

Nos pondremos un poco más creativos y sofisticados con el siguiente método, donde pasaremos los eventos mouseenter y mouseleave como una función.

El HTML se modificará ligeramente:

<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"
/>

Y el app.component.ts también:

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;
  }
}