如何给组件元素添加带有动态样式的悬停效果？

Question

我有这个 Angular 组件，其中悬停效果当前应用了 .scss 文件中的伪 class :hover。但是我想用动态值应用悬停效果。

所以假设如果我想让元素的背景在悬停时改变，当前的 css 看起来像这样：

.element {
     display: flex;
     justify-content: center;

     &:hover {
          background-color: red;
     }
}

但现在我希望悬停背景颜色具有动态值，该值在用户从 UI 提供的组件内可用，因此颜色可以是任何颜色。我还想实现的另一件事是在选择元素时向该元素添加一个 class 。我的意思是悬停时，背景将更改为动态值，但如果选择了元素，则相同的颜色将成为背景色。如果取消选择，它将恢复为原始颜色。

我是 Angular 的新手，所以我不确定如何实现。谁能帮帮我？

Answer 1

您不能通过 JavaScript 动态设置伪 类。您必须：

1. 使用组件中的鼠标悬停事件实现您自己的动态样式
2. 换成纯粹的 CSS 解决方案，让组件的使用者用他们自己的 CSS.
中所需的颜色覆盖悬停伪选择器

我赞成第二种选择。在您的组件声明中关闭视图封装，确保您的组件 CSS 通过一些 CSS 组件方法（如 BEM）合理地包含在该组件中，并让消费者覆盖您的样式。