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

【问题标题】：How to use mouse enter and mouse exit or hover如何使用鼠标进入和鼠标退出或悬停
【发布时间】：2016-08-01 13:33:12
【问题描述】：

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

弹出窗口有多个，如下所示

 <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”

【问题讨论】：

标签： javascript angular

【解决方案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;
  }
}

【讨论】：