如何在Angular4及以上版本中实现鼠标悬停切换图片src属性

AI 小北

2026-10-4

Angular 4+ 悬停修改图片src实现方案

1. 修改.ts组件逻辑

首先在组件类中新增一个变量存储当前悬停的菜单索引，再实现你模板中已经绑定的over和out方法：

// 组件类中新增变量
hoveredIndex: number = -1;

// 实现悬停事件方法
over(i: number): void {
  // 如果需要排除禁用状态的菜单，可以在这里加判断条件
  this.hoveredIndex = i;
}

out(): void {
  this.hoveredIndex = -1;
}

你现有的菜单JSON配置不需要做任何修改，直接复用已有的icon和activeIcon字段即可。

2. 修改HTML模板的图片绑定

你原来用两个div加hidden切换图片的写法可以简化，直接用Angular属性绑定动态计算src的值即可，既保留原有的选中态高亮逻辑，又新增悬停切换效果：

<!-- 替换原来两个带hidden的img div，只保留这一个img即可 -->
<img 
  [src]="selectedItem == i || hoveredIndex == i ? menu.activeIcon : menu.icon" 
  alt="{{menu.menuText}}"
/>

完整修改后的li内部图片相关代码片段如下：

<div class="ci-pl-20 ci-pr-20" [ngClass]="menuList ? 'ci-pt-10' : ''">
  <!-- 替换后的动态图片 -->
  <img 
    [src]="selectedItem == i || hoveredIndex == i ? menu.activeIcon : menu.icon" 
    alt="{{menu.menuText}}"
  />
  <div [hidden]="menuName == 'Encounter' && menuName == 'Clinical Trials' && menuName !== 'Case Summary'" class="ci-position-absolute" 
  style="top:-3%; left: 63%;">
    <img src="{{menu.betaIcon}}" />
  </div>
</div>