Angular 2/4中实现鼠标悬停时显示与隐藏div的方法

嘿，这个需求在Angular里其实挺常见的，我给你分享几种简单好用的实现方式，你可以根据自己的场景来选：

方法一：用*ngIf结合鼠标事件（添加/移除DOM元素） #

这种方式会直接在DOM里添加或移除目标div，适合不需要保留元素占位的场景。

步骤： #

1. 在组件类里定义一个布尔变量，用来跟踪悬停状态：

import { Component } from '@angular/core';

@Component({
  selector: 'app-hover-example',
  templateUrl: './hover-example.component.html'
})
export class HoverExampleComponent {
  isHovered = false; // 默认隐藏

  onMouseEnter() {
    this.isHovered = true;
  }

  onMouseLeave() {
    this.isHovered = false;
  }
}

2. 在模板里绑定事件并控制div显示：

<!-- 触发悬停的元素，比如一个卡片或按钮 -->
<div 
  (mouseenter)="onMouseEnter()" 
  (mouseleave)="onMouseLeave()"
  style="padding: 20px; border: 1px solid #ccc; width: 200px;"
>
  鼠标悬停我试试
</div>

<!-- 需要显示隐藏的目标div -->
<div *ngIf="isHovered" style="margin-top: 10px; padding: 10px; background: #f5f5f5;">
  我是悬停后显示的内容！
</div>

方法二：用[hidden]指令（控制元素显示状态，保留DOM） #

如果需要目标div在隐藏时仍然占据页面空间，就用[hidden]，它本质是设置display: none。

只需要把模板里的*ngIf改成[hidden]就行，组件类代码不用变：

<div 
  (mouseenter)="onMouseEnter()" 
  (mouseleave)="onMouseLeave()"
  style="padding: 20px; border: 1px solid #ccc; width: 200px;"
>
  鼠标悬停我试试
</div>

<!-- 用[hidden]控制，注意逻辑和*ngIf相反 -->
<div [hidden]="!isHovered" style="margin-top: 10px; padding: 10px; background: #f5f5f5;">
  我是悬停后显示的内容！
</div>

方法三：处理多个元素的悬停（比如列表项） #

如果是列表里每个项都需要独立的悬停状态，就把变量改成数组或对象来跟踪每个项的状态：

组件类： #

import { Component } from '@angular/core';

@Component({
  selector: 'app-list-hover',
  templateUrl: './list-hover.component.html'
})
export class ListHoverComponent {
  items = ['Item 1', 'Item 2', 'Item 3'];
  hoveredItemId: number | null = null;

  onItemMouseEnter(index: number) {
    this.hoveredItemId = index;
  }

  onItemMouseLeave() {
    this.hoveredItemId = null;
  }
}

模板： #

<ul>
  <li 
    *ngFor="let item of items; let i = index"
    (mouseenter)="onItemMouseEnter(i)"
    (mouseleave)="onItemMouseLeave()"
    style="padding: 10px; border: 1px solid #eee; margin: 5px 0;"
  >
    {{ item }}
    <span *ngIf="hoveredItemId === i" style="margin-left: 10px; color: blue;">
      操作按钮
    </span>
  </li>
</ul>

这些方法都是Angular里原生的实现方式，不需要额外引入第三方库，简单直接。你可以根据自己的需求调整样式和逻辑~

内容的提问来源于stack exchange，提问作者user1954964