How can I disable the row hover highlighting?

[LRHF]

Hi again,
I cloned the repo and set enableMouseHoverHighlightRow = false for the grids in the Example 1, but that setting does not work.
I tried in CSS with $slick-row-mouse-hover-color: transparent; and works partially, since odd rows don't show the background color.
I tried with pointer-events:none but that affects sorting and the tree expander, etc.
As you can see, I spent some time investigating and reading the documentation, but couldn't find a proper way to disable that.
Thanks!

[ghiscoding]

The enableMouseHoverHighlightRow is not meant for that, perhaps the name isn't a good name but it was added for Frozen grids because frozen column uses multiple divs, so that is flag was created for that feature and is so that the hover is replicate on all divs because by default the hover is only for the div you are currently hovering but we wanted the entire row to have the hovering so we created that mouse event

instead of using transparent, you could try with the color that you use as default background, most probably white or actually unset would probably be better. The other option would be to override the :hover that the $slick-row-mouse-hover-color is associated to.

.grid-canvas {
    .slick-row {
      &:hover {
        background-color: unset;
      }
  }
}

Also note that I use CSS variable fallback for the SASS variable, so if you set the CSS variable it would win over a SASS variable, if you set it on the :root then that would make it global

:root {
  --slick-row-mouse-hover-color: unset;
}

You can try any of that, I didn't test any of them

[LRHF]

Thanks @ghiscoding
This finally worked:

$slick-row-mouse-hover-color: transparent;     

// Keep odd rows background color on hover (otherwise it's transparent).
.slickgrid-container .ui-widget-content.slick-row.odd:hover {
  background-color: #f2f2f2;
}

Notes:

• unset does not work since there are some calculations in CSS.
• This style also works but only when using transparent and !important:

:root {
  --slick-row-mouse-hover-color: transparent !important;
}

[ghiscoding]

there's no !important on the original one so you shouldn't need to use the !important at all. However you might need to use more specific CSS class, something like

.grid-canvas .slick-row,
.grid-canvas .slick-row.odd {
  --slick-row-mouse-hover-color: transparent;
}

The :root is nice to make it global but it might not be specific enough for it to not be overriden, you should check the developer tool to find out which nested style is overriding yours... it's never too good to use !important and should always be a very last resource