javascript - 如何使用鼠标进入和鼠标退出或悬停

Question

我想在鼠标悬停时显示和隐藏一个弹出窗口/工具提示。

弹窗有多个，如下所示

 <div class="hotspot_info pointer" style="    top: {{towerPoint.posY}}%;    left: {{towerPoint.posX}}%;" *ngFor="#towerPoint of visualisation.towerPoints">
            <div class="tower-details"  style="    position: absolute;    top: -90px;    left: -84%;">
                <div class="popover top" style="display: block;">
                    <div class="arrow" style="left: 50%;"></div>
                    <h3 class="popover-title">{{towerPoint.tower.name}}</h3>
                    <div class="popover-content">Tower Name</div>
                </div>
            </div>

悬停在“.tower-details”我想显示“.popover”并在鼠标退出时隐藏“.popover”

Answer 1

要监听单个标签，您可以使用:

@Component({
  selector: 'my-component',
  directives: [PopUp],
  template: `
<div (mouseover)="mouseover=true" (mouseout)="mouseover=false">xxx</div>
<pop-up *ngIf="mouseover">some content</pop-up>
`
})
class MyComponent {
  mouseover:boolean;
}

另见 What is the difference between the mouseover and mouseenter events?

要让组件监听鼠标事件，您可以使用:

@Component({
  selector: 'my-component'
  directives: [PopUp],
  template: `
    xxx
    <pop-up *ngIf="mouseover">some content</pop-up>`
})
class MyComponent {
  mouseover:boolean;

  @HostListener('mouseover')
  onMouseOver() {
    this.mouseover = true;
  }

  @HostListener('mouseout')
  onMouseOut() {
    this.mouseover = false;
  }
}