Невозможно изменить CSS с помощью JavaScript - PullRequest
0 голосов
/ 03 июля 2018

Внутри функции handsatable _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;
}
<div class="${styles.hotColHeaderContainer}" id=cont${varId}> </div>

Мой div.hotColHeaderContainer содержится внутри файла scss, а мой div сделан внутри функции, которая используется для генерации заголовка моего столбца. varId - это переменная, которая меняет имя в зависимости от имени переменной, используемой в заголовке столбца. Есть ли причина, по которой я не могу изменить стиль из _afterOnCellMouseOver? Я очень плохо знаком с javascript, handsontable и css.

1 Ответ

0 голосов
/ 03 июля 2018

Вы можете просто использовать селектор 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>
...