igGrid マウスをホバーしたセルをハイライトする

igGrid でマウスをホバーしたセルをハイライト（強調表示）する場合、下記実装を行います。

１．デフォルトの行ハイライトを無効化します。

<style>
    /* マウスホバー時のハイライト色を無効化 */
    .ui-iggrid td.ui-state-hover, .ui-iggrid .ui-ig-altrecord td.ui-state-hover {
        color: unset;
        background-color: unset;
    }
</style>

２．igGrid のセルに対して、mouseenter と mouseleave イベントで背景色を指定・解除します。

// マウスホバーしているセルをハイライトする。
$(".ui-iggrid td").mouseenter((evt) => {
    console.log('mouseenter: ', evt);
    evt.target.style.background = 'red';
});
// セルのハイライトを解除する。
$(".ui-iggrid td").mouseleave((evt) => {
    evt.target.style.background = '';
});

実行結果