Angular 2 호버 이벤트

1. Angular의 mouseenter 및 mouseleave 애플리케이션
2. Angular의 mouseover 및 mouseout 애플리케이션
3. mouseenter 및 mouseleave를 Angular의 함수로 전달

화면의 특정 요소에 마우스를 가져가면 클릭하지 않고도 정보에 액세스할 수 있습니다. 마우스를 가져가는 요소에서 일부 기능을 수행할 수도 있습니다.

이 기사에서는 요소에 마우스 호버링 이벤트 기능을 수행하는 간단한 솔루션을 살펴봅니다.

mouseenter 및 mouseleave 기능을 적용하여 호버 이벤트를 생성합니다. 두 번째 방법은 mouseover와 mouseout이라는 두 가지 기능도 사용합니다.

그런 다음 호버 이벤트를 수행하기 위해 보다 고급 접근 방식을 적용합니다.

Angular의 mouseenter 및 mouseleave 애플리케이션

쌍으로 제공되는 함수를 처리할 때 각 함수에 대한 항목을 전달해야 합니다.

mouseenter 함수를 사용하여 요소 위로 마우스를 가져갈 때 어떤 일이 발생하는지 선언합니다. 그런 다음 mouseleave 기능은 마우스를 멀리 이동할 때 발생하는 일을 결정합니다.

HTML 입력은 다음과 같이 표시됩니다.

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

그런 다음 app.component.ts를 아래와 같이 작성합니다.

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

Angular의 mouseover 및 mouseout 애플리케이션

mouseover 및 mouseout 속성은 앞에서 설명한 방법과 같이 쌍으로 작동하므로 기능을 전환하기만 하면 됩니다.

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

mouseenter 및 mouseleave를 Angular의 함수로 전달

mouseenter 및 mouseleave 이벤트를 함수로 전달하는 다음 메서드를 사용하면 좀 더 창의적이고 정교해집니다.

HTML이 약간 조정됩니다.

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

그리고 app.component.ts도:

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