本文介绍在 Angular 中结合条件逻辑与 CSS 伪类实现动态悬停背景色的正确方法，通过 CSS 自定义属性（CSS Variables）桥接组件状态与 :hover 样式，规避直接绑定伪类样式不可行的技术限制。
本文介绍在 angular 中结合条件逻辑与 css 伪类实现动态悬停背景色的正确方法，通过 css 自定义属性（css variables）桥接组件状态与 `:hover` 样式，规避直接绑定伪类样式不可行的技术限制。
在 Angular 模板中，开发者常希望根据组件数据状态（如 u.selected）动态控制元素悬停（:hover）时的样式。但需明确一个关键限制：HTML 元素的伪类（如 :hover、:focus）无法通过 Angular 的属性绑定（如 [style:hover.background-color]）直接操作——因为伪类不属于 DOM 节点，不暴露可编程的 DOM API，Angular 也无法在运行时动态注入或修改伪类规则。
✅ 正确解法是利用 CSS 自定义属性（CSS Custom Properties） 作为“状态桥梁”：
- 在 CSS 中定义一个带 :hover 的类，并使用 var(--highlight-color) 作为背景色值；
- 在模板中通过 [ngStyle] 动态设置该自定义属性的值（支持表达式）；
- 浏览器原生处理 :hover + var() 的联动，实现响应式悬停变色。
示例代码如下：
styles.css（或组件 SCSS 文件）
.highlight:hover {
background-color: var(--highlight-color, #f0f0f0); /* 提供默认回退色 */
}template.html
<div
class="highlight"
*ngFor="let u of users"
[ngStyle]="{'--highlight-color': u.selected ? 'red' : 'lightblue'}"
>
{{ u.name }}
</div>? 注意事项：
- --highlight-color 是合法的 CSS 变量名，必须以 -- 开头；
- [ngStyle] 支持对象语法，键名为带引号的 CSS 变量名（含 --），值为动态计算的字符串；
- 建议为 var() 提供默认值（如 var(--highlight-color, #f0f0f0)），增强样式鲁棒性；
- 该方案兼容所有现代浏览器（Chrome 49+、Firefox 31+、Safari 9.1+、Edge 15+）；
- 避免在 *ngFor 中频繁触发大量 ngStyle 计算；若用户列表极大，可考虑用 trackBy 优化性能。
总结：Angular 不支持直接绑定伪类样式，但借助 CSS 自定义属性这一标准机制，即可优雅、高效、声明式地实现“基于组件状态的悬停样式动态切换”，兼顾可维护性与运行时性能。
