无法使用 javascript 更改 css

Question

在 handsontable 的 _afterOnCellMouseOver 函数中，当我将鼠标悬停在列 header 上时，我试图更改 css 颜色属性。

_afterOnCellMouseOver(e, coords, td) {
    if (coords.row === -1 &&& this.hot) {
        let contElem = document.getElementById(`cont${varId}`);
        contElem.style.color = "purple";
    }
}

div.hotColHeaderContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
    position: relative;
}

<div class="${styles.hotColHeaderContainer}" id=cont${varId}> </div>

我的 div.hotColHeaderContainer 包含在 scss 文件中，而我的 div 是在用于生成我的列 header 的函数中创建的。 varId 是根据列 header 中使用的变量名称更改名称的变量。有什么原因导致我无法从 _afterOnCellMouseOver 中更改样式？我对 javascript、handsontable 和 css.

很陌生

Answer 1

您可以只使用 css hover 选择器。下面的片段：

div.hotColHeaderContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
    position: relative;
}
div.hotColHeaderContainer:hover {
    color: purple
}

<div class='hotColHeaderContainer'>Hello</div>

无法使用 javascript 更改 css

Unable to change css using javascript

javascript

html

css

handsontable