Angular中实现单个按钮Hover时独立修改文本颜色的方案咨询

问题原因 #

你当前用单个hovered变量控制所有按钮的hover状态，循环里的每个按钮都绑定同一个变量，所以只要有一个按钮触发mouseover，所有按钮的ngStyle都会跟着更新，导致同步变色。

方案一：给每个按钮维护独立的hover状态 #

把全局的hovered变量改成对象，存储每个按钮的hover状态（用按钮的唯一标识做键，比如button.text或button.id）：

组件代码 #

// 组件类中定义
hoveredButtons: { [key: string]: boolean } = {};

// 事件处理方法
onButtonHover(buttonText: string, isHovered: boolean) {
  this.hoveredButtons[buttonText] = isHovered;
}

模板代码 #

@for (button of toast.buttons; track button){
  <button
    [ngStyle]="hoveredButtons[button.text] ? 
      {'background-color': button.color, 'border-color': button.color, 'color': button.color} : 
      {'background-color': button.color, 'border-color': button.color, 'color':'#fff'}"
    (mouseover)="onButtonHover(button.text, true)"
    (mouseout)="onButtonHover(button.text, false)"
    (click)="close()"
    class="modal-button">
    {{button.text}}
  </button>
}

方案二：用CSS变量+原生:hover伪类（更简洁） #

这种方法不需要JS事件，直接通过CSS变量传递按钮颜色，用原生hover伪类控制样式，性能更好：

模板代码 #

@for (button of toast.buttons; track button){
  <button
    [style.--button-color]="button.color"
    (click)="close()"
    class="modal-button">
    {{button.text}}
  </button>
}

CSS代码 #

.modal-button {
  background-color: var(--button-color);
  border-color: var(--button-color);
  color: #fff;
  /* 其他基础样式 */
}

.modal-button:hover {
  color: var(--button-color);
  /* 如果需要hover时调整背景色也可以在这里加 */
}

这种方式利用原生CSS的:hover伪类，每个按钮的样式独立，不会出现同步变色的问题，代码也更简洁。

内容的提问来源于stack exchange，提问作者Ника Долгирева