单击按钮时将CSS应用于特定div

我试图实现一个功能，其中一个div以某种颜色高亮显示，鼠标指针转向手。我可以通过申请一门课程来做到这一点

.changePointer:悬停{
光标：指针；
背景色：rgb（231222222）；
}

而且效果很好

但我只想在点击一个按钮时实现这一点。所以，点击一个按钮，如果我将鼠标悬停在一个div上，它就会高亮显示，并得到指针。我用的是Angular 7。我尝试使用

[ngClass]=“{'someClass'：highlightText}”

并将

highlightText

布尔值更改为
真值
，但没有帮助。有什么建议吗？
按如下方式使用类（
active
这里是类名）



在
css
中添加
：将
悬停在
活动的
类中

.active:悬停{
背景色：红色；
光标：指针；
}

您可以使用来操作元素的css

HTML:

演示：
您可以使用事件侦听器在JavaScript中执行此操作

button.addEventListner('click', (e) => {
    div.style.backgroundColor = 'rgb(231, 222, 222)';
    div.style.cursor = 'pointer';
});

只需在需要时向元素添加类
.changePointer


函数切换目标（）{
//我使用数据集属性，但您可以根据需要选择目标
让targets=document.querySelectorAll（“[data type=A]”）
targets.forEach（elem=>elem.classList.toggle（'changePointer'））
}
.changePointer:悬停{
光标：指针；
背景色：rgb（231222222）；
}
div{边框：1px纯黑色；边距：5px；}
点击
A.
B
C
D
E
F
G
H
我
您的意思是，您同时单击一个按钮并将鼠标悬停在一个div上？无论如何，解决方案就是在需要时将类
.changePointer
添加到元素中。否。我单击I按钮，然后将鼠标悬停在可用的多个div中的任何一个上，该特定div会高亮显示感谢您的帮助，但我认为这适用于单击时的类。我想在hover上添加类。因此，单击鼠标，鼠标会变为手动，并将颜色应用于文本悬停的div。您的意思是说，
：hover
行为应仅在按钮单击后添加？是的，：hover行为应仅在按钮单击后添加。更新的演示<代码>：单击后将添加悬停
。谢谢Stavm，但单击按钮时指针不会变为手动。正如我提到的，单击鼠标，鼠标变为“手”，并将颜色应用于文本悬停的div。@您可以添加一个布尔标志，更新演示。手图标不会悬停，但我做了一些更改，并使其正常工作。谢谢你的帮助
  import { Component, Renderer2 } from '@angular/core';


  constructor(private rndr2: Renderer2) {}

  onClick(ev) {
    this.rndr2.addClass(ev.target, 'changePointer')
  }

button.addEventListner('click', (e) => {
    div.style.backgroundColor = 'rgb(231, 222, 222)';
    div.style.cursor = 'pointer';
});