javascript - Angular:动态更改伪类中的 SCSS 属性

Question

在我的 Angular 组件中，我需要动态更改一个元素的:hover 伪类的边框颜色。

颜色是在组件的对象变量中找到的，但我不知道如何专门针对悬停。

在TS组件中:

items = [
  { id: 0, color: "#ff4400" },
  { id: 1, color: "#faa73d" },
];

在 SCSS 文件中:

.menuItem {
  border-color: #fff;

  &:hover {
  }
}

所以基本上我希望对象中的颜色仅动态应用于悬停状态，而不是默认状态。

谢谢!

Answer 1

无法为具有伪类的 HTML 元素设置样式，因为伪元素不是 DOM 树的一部分，因此不会公开任何可用于与它们交互并设置这些元素样式的 DOM API。

但就像黑客一样，您可以使用 mouseover 和 mouseout 事件为您的用例动态切换样式，例如 -

<ul>
  <li *ngFor='let item of items' #ele (mouseover)='ele.style.color = item?.color' (mouseout)='ele.style.color = "black"'>{{item?.id}}</li>
</ul>

Working Example