Angular 2 懸停事件
Oluwafisayo Oluwatayo
2023年1月30日
2022年4月20日
-
Angular 中的
mouseenter
和mouseleave
應用程式 -
Angular 中的
mouseover
和mouseout
應用程式 -
將
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;
}
}
Author: Oluwafisayo Oluwatayo
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn