Unable to change css using javascript

Question

Inside of handsontable's _afterOnCellMouseOver function, I am trying to change the css color property for my column headers when i hover over them.

_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>

My div.hotColHeaderContainer is contained inside of a scss file and my div is made inside of a function that is used to generate my column header. varId is a variable that changes name depending on the variable name used in the column header. Is there any reason why I am unable to change the style from within _afterOnCellMouseOver? I am very new to javascript, handsontable and css.

Answer 1

You could just use the css hover selector. Snippet below:

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

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