无法使用 javascript 更改 css答案

【问题标题】：Unable to change css using javascript无法使用 javascript 更改 css
【发布时间】：2018-12-12 02:49:48
【问题描述】：

在 handsontable 的 _afterOnCellMouseOver 函数中，当我将鼠标悬停在列标题上时，我试图更改它们的 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;
}

&lt;div class="${styles.hotColHeaderContainer}" id=cont${varId}&gt; &lt;/div&gt;

我的 div.hotColHeaderContainer 包含在一个 scss 文件中，我的 div 包含在一个用于生成列标题的函数中。 varId 是根据列标题中使用的变量名称更改名称的变量。为什么我无法从 _afterOnCellMouseOver 中更改样式？我对 javascript、handsontable 和 css 非常陌生。

【问题讨论】：

不用js也可以，用css hover属性
为什么<div class="${styles.hotColHeaderContainer}" id=cont${varId}> </div> 应该有效？这在纯 html 上是不可能的。你在使用任何框架吗？
正如@Rumesh 所说，确实为过度行为放弃了 JS。通过使用 :hover 选择器w3schools.com/cssref/sel_hover.asp 使用完整的 CSS 解决方案
stackoverflow.com/questions/848840/…
JavaScript 解决方案根本不可能吗？悬停效果很好，但我只是好奇。

标签： javascript html css handsontable

【解决方案1】：

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

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

&lt;div class='hotColHeaderContainer'&gt;Hello&lt;/div&gt;

【讨论】：