Angular: динамически изменять свойство SCSS в псевдоклассе

Question

в моем угловом компоненте мне нужно динамически изменить цвет границы псевдокласса: hover одного элемента.

Цвет найден в переменной объекта в компоненте, но я не могу понять, как конкретно нацелить курсор мыши.

В компоненте TS:

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

В файле SCSS:

.menuItem {
  border-color: #fff;

  &:hover {
  }
}

Поэтому я бы хотел, чтобы цвет объекта динамически применялся только к состоянию наведения, а не к состояниюпо умолчанию.

Спасибо!

Answer 1

Стилизация для элемента HTML, имеющего псевдокласс, невозможна, поскольку псевдоэлементы не являются частью дерева DOM и поэтому не предоставляют никаких API-интерфейсов DOM, которые можно использовать для взаимодействия с ними, и стиля этих элементов.

Но для взлома вы можете использовать события 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>

Рабочий пример