Angular 4中如何用*ngFor实现元素的显示与隐藏（鼠标悬停场景）

我来帮你搞定这个元素显示隐藏的问题，其实有两种简单好用的实现方式，你可以根据自己的需求来选：

方法一：纯CSS实现（推荐，无需组件逻辑） #

这种方法最省心，不用改组件代码，只需要加几行CSS就能搞定。核心思路是利用CSS的:hover伪类，通过父元素的 hover 状态控制子元素的显示隐藏：

1. 首先给.middle设置初始隐藏样式
2. 当父容器.imgTxt被鼠标悬停时，显示里面的.middle元素

/* 初始状态隐藏middle区域 */
.middle {
  display: none;
  /* 保留你原来的其他样式，比如定位、背景色这些 */
}

/* 当父容器imgTxt被hover时，显示对应的middle */
.imgTxt:hover .middle {
  display: block;
}

你的HTML代码完全不需要改动，保持原来的结构就可以：

<div class='row'>
  <div class='col-md-4 imgTxt' *ngFor="let path of imagePaths" >
    <img [id]='path.id' (mouseenter)="ent(path.img)" class="d-block w-100 image" [src]='path.img' alt="Third slide">
    <div class="middle">
      <div class="text">{{path.txt}}</div>
    </div>
  </div>
</div>

这种方法的好处是轻量，完全由浏览器处理交互，性能更好，也不用维护组件里的状态变量。

方法二：Angular组件逻辑控制（适合需要复杂交互的场景） #

如果之后你需要在悬停时做更多逻辑操作（比如记录当前悬停的图片ID、发送请求等），可以用Angular的属性绑定来实现：

第一步：修改组件逻辑 #

在你的组件类里，给每个图片项添加一个isHovered状态：

// 假设你的组件类是这样的
export class YourComponent {
  imagePaths = [
    // 你的图片数组，每个对象添加isHovered初始为false
    { id: 1, img: 'path1.jpg', txt: '文本1', isHovered: false },
    { id: 2, img: 'path2.jpg', txt: '文本2', isHovered: false },
    // ...其他项
  ];

  // 鼠标进入时设置当前项为hover状态
  onImageEnter(path: any) {
    path.isHovered = true;
  }

  // 鼠标离开时取消hover状态
  onImageLeave(path: any) {
    path.isHovered = false;
  }
}

第二步：更新模板代码 #

在模板里用*ngIf或者[style.display]来控制.middle的显示，同时添加上mouseleave事件：

<div class='row'>
  <div class='col-md-4 imgTxt' *ngFor="let path of imagePaths" >
    <img 
      [id]='path.id' 
      (mouseenter)="onImageEnter(path)" 
      (mouseleave)="onImageLeave(path)"
      class="d-block w-100 image" 
      [src]='path.img' 
      alt="Third slide"
    >
    <!-- 用*ngIf控制显示隐藏 -->
    <div class="middle" *ngIf="path.isHovered">
      <div class="text">{{path.txt}}</div>
    </div>
  </div>
</div>

如果不想用*ngIf（因为它会添加/移除DOM元素），也可以用样式绑定来控制：

<div class="middle" [style.display]="path.isHovered ? 'block' : 'none'">
  <div class="text">{{path.txt}}</div>
</div>

这样就能精准控制每张图片对应的文本区域，只有当前悬停的图片才会显示对应的.middle。

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