本文介绍在 Angular 中如何结合组件状态与鼠标悬停，动态设置 的背景色——通过 CSS 自定义属性（CSS Variables）桥接模板逻辑与伪类样式，规避 :hover 无法直接绑定内联样式的限制。
本文介绍在 angular 中如何结合组件状态与鼠标悬停，动态设置 `
` 的背景色——通过 css 自定义属性（css variables）桥接模板逻辑与伪类样式，规避 `:hover` 无法直接绑定内联样式的限制。
在 Angular 模板中，我们常希望根据组件数据（如 u.selected）和用户交互（如 hover）共同决定元素样式。但需注意：:hover 是 CSS 伪类，不属于 DOM 节点，因此无法通过 [style:hover.background-color] 这类绑定语法直接操作——该写法语法错误，Angular 也不支持伪类的动态样式绑定。
正确解法是利用 CSS 自定义属性（CSS Custom Properties） 作为“桥梁”：在 CSS 中定义 :hover 样式，并引用一个变量；再通过 [ngStyle] 在模板中动态设置该变量值。这种方式既保持了样式逻辑的声明性，又实现了运行时状态驱动。
✅ 推荐实现步骤如下：
-
在组件样式文件（如 component.scss）中定义悬停规则：
.highlight:hover { background-color: var(--highlight-color, #f0f0f0); /* 提供默认回退色 */ } -
在模板中为元素添加对应 class，并用 [ngStyle] 动态注入 CSS 变量：
<div class="highlight" *ngFor="let u of users" [ngStyle]="{'--highlight-color': u.selected ? 'red' : 'blue'}" > {{ u.name }} </div>
⚠️ 注意事项：
- ngStyle 支持传入 CSS 变量（以 -- 开头的属性名），Angular 会自动将其写入元素的 style 属性；
- var(--highlight-color) 必须在作用域内有定义（即父/自身元素的 style 中已设置），否则将回退到 var() 的第二个参数（如有）或继承值；
- 若需兼容旧版浏览器（如 IE），CSS 变量不可用，此时应改用 CSS 类切换 + @HostBinding 或 Renderer2 动态增删类；
- 避免在循环中频繁触发 ngStyle 大量计算——若 users 数量极大，建议结合 OnPush 策略或使用纯 CSS 方案（如预设 .highlight.selected:hover 类）优化性能。
? 扩展提示：你还可以将颜色逻辑封装为管道（Pipe）或计算属性，提升可读性与复用性：
// 在组件中
getHighlightColor(user: User): string {
return user.selected ? '#e53e3e' : '#3182ce';
}<div class="highlight" *ngFor="let u of users" [ngStyle]="{'--highlight-color': getHighlightColor(u)}">
{{ u.name }}
</div>此方案简洁、标准、可维护，是 Angular 应用中处理“状态 + 伪类”样式组合的推荐实践。
