Javascript 在DOM中的特定元素上鼠标悬停时订阅

当鼠标滑过DOM中的特定元素时，我需要订阅并执行一些操作

例如：home.component.html

        <div class="container">
              <div class="row1"> </div>
              <div class="row2"> </div>
              <div class="row3"> </div>
        </div>

---

在上面的示例中，当鼠标悬停在第1行和第3行元素上时，我需要订阅。我还需要检查一个名为“hover”的变量，如果它为真，那么我只需要执行上面的操作（mouseover）。如果变量为false，则无需检查mouseover（无需执行任何操作），只需取消订阅即可。有谁能帮我做到这一点。

只需对

mouseenter

和

mouseleave

事件做出反应即可

<div (mouseenter)="setHover(true)" (mouseleave)="setHover(false)">Hover me to see additional text</div>
<div *ngIf="shouldShow">HELLO WORLD</div>

---

请参见此示例：如果您想订阅来自多个元素的事件，您可以在两个元素行1和行2上使用fromEvent，合并它们并相对于悬停布尔值进行筛选，如果触发两个悬停事件中的一个，combineLastest将发出一个值

import { merge, fromEvent  } from 'rxjs';
import { map, filter } from 'rxjs/operators';

@ViewChild('row1', { static: true }) row1: ElementRef;
@ViewChild('row2', { static: true }) row2: ElementRef;

merge(
 fromEvent(this.row1.nativeElement, 'mouseover'),
 fromEvent(this.row2.nativeElement, 'mouseover')
).pipe(
 filter(_ => !!this.hover),
 map((event) => {
  // some control here
 })
).subscribe();

---

mouseover上会发生什么样的操作？我需要显示和隐藏一些元素，这些元素位于容器元素的下面。

export class AppComponent  {
  canHover: boolean = true;
  isHover: boolean = false;

  setHover(hover: boolean) {
   this.isHover = hover;
  }

  get shouldShow() {
    return this.canHover && this.isHover;
  }
}

import { merge, fromEvent  } from 'rxjs';
import { map, filter } from 'rxjs/operators';

@ViewChild('row1', { static: true }) row1: ElementRef;
@ViewChild('row2', { static: true }) row2: ElementRef;

merge(
 fromEvent(this.row1.nativeElement, 'mouseover'),
 fromEvent(this.row2.nativeElement, 'mouseover')
).pipe(
 filter(_ => !!this.hover),
 map((event) => {
  // some control here
 })
).subscribe();