Angular:动态更改伪类中的SCSS属性 [英] Angular: dynamically change SCSS property in pseudo-class

问题描述

在我的角度组件中，我需要动态更改一项的:hover伪类的边框颜色.

in my angular component I have the need to dynamically change the border-color of the:hover pseudo class of one item.

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

The color is found in an object variable in the component but I can't figure out how to target the hover specifically.

在TS组件中:

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

在SCSS文件中:

.menuItem {
  border-color: #fff;

  &:hover {
  }
}

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

So basically I'd like the color in the object to be dynamically applied only to the hover state and not the default one.

谢谢！

推荐答案

不可能将具有伪类的HTML元素样式化，因为伪元素不是DOM树的一部分，因此不会公开任何DOM API，可用于与他们互动并为这些元素设置样式.

Styling to HTML element having pseudo-class is not possible, because pseudo elements are not part of DOM tree, and because of that do not expose any DOM API that can be used to interact with them and style those elements.

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

But just as hack you can use mouseover and mouseout event for your use case to toggle style dynamically, for example -

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

工作示例

这篇关于Angular:动态更改伪类中的SCSS属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！