Can you dynamically change header text Hover color?

Tags: #<Tag:0x00007efc64ceede0>
#1

I have reviewed all the postings I can find on how to change header text, etc and when it comes to styling, the general approach seems to be to use afterGetcolHeader, and then assign a class to the TH element…

However, in my case, the color is dynamic and chosen by the user…so I don’t have any pre-existing CSS with hover states I can use.

Is there anyway to modify the header text hover color dynamically?

Thx

#2

Hey @mhennessy7

how do you set that hover color? Do you load it from a base or there’s some kind of button/slider on the page/context menu?

#3

The color is selected by the user when they configure the app, they choose a primary color.
This is available to the component through a “color” property that is passed in.

#4

Here’s an example that may help https://jsfiddle.net/AMBudnik/nhzL7aqx/

And here https://stackoverflow.com/questions/11371550/change-hover-css-properties-with-javascript are some tips on how to add :hover via JS.

#5

Yes, this is the path I was going down. You can set the style.color via the example you shared, I got that far, but you cannot change the :hover state inline on a div. So, I believe what I need to do is add the onMouseHover and onMouseOut javascript to the TH element where I change the color base on that, but I have not figured out a way to do that?

Does somewhere there have an example of how to add those javascript events to the TH element?

#6

The afterOnCellMouseOver returns

05
Zrzut ekranu 2020-04-17 o 15.30.05.png742×176 14.7 KB

then

hovering over the row header of cell (0, 0) results with afterOnCellMouseOver called
with coords {row: 0, col: -1} .

so you should check that.

#7

Thanks, I’ll give that a shot

#8

So, I’m trying this:

afterOnCellMouseOver: (events,coords,TD) => {
if(coords.row===-1)
{
TD.style.color=‘red’
}
}

And it’s not changing the color of the header. Is there something else I need to set?

#9

never mind, it was because I had set some CSS attributes with !important.
This worked great, thanks!

#10

That’s a quick update. I’m glad to hear that the case is solved.
I’m closing this topic.

#11