Pretty basic but I can't figure out how to change the on-hover color for Perspective Tree components. I think it's grey by default but I'd like to be able to change it if possible. Is there a property to do so?
Probably not a direct property, but should be possible with an appropriately targeted :hover selector... @victordcq @cmallonee 
The Tree component has multiple pieces of which the color can be changed - which one are you trying to change?
I was able to specify a hover color with the following setup:
- Create a Named Style.
- Click the
+icon. - Select
Element State. - Use the Element State dropdown to select "hover".
- Under "Shape", set the fill (or stroke if you want to change the outline of the symbols) property to whatever color you want.
- Save your changes.
- under whichever piece of the Tree you're looking to change, add a new property under
styleand name this new property "classes". - Use the dropdown available to this classes property to select your new Named Style.
I tried what you mentioned but didn't have the same luck. There's sections for style, unselected style, and selected style on that Tree component but adding my style class to any of those 3 didn't have an effect.
I posted a screenshot to show it better but I'm trying to change that light hover color to something else.
Oh, the background highlighting? I don't know how you would control that off of the top of my head. Let me ask around.
Oof. You can control it, but it's very burdensome, just because of how we were forced to structure our own rules for applying styles to the Tree component.
To overwrite the hover styling for tree items, you would supply the following snippet into your custom theme file or within the stylesheet.css resource which became available as part of 8.1.21.
.ia_treeComponent__node:hover:not(.ia_treeComponent__node--selected) {
background-color: #FF0000;
}
Where #FF0000 is the color you want to use. You can of course supply variables here as well. The current value you are seeing is var(--callToActionHighlight)
The reason you can't overwrite this within the style object or within a Named Style class is because of the specificity of the selector in use.
In the following screenshot, I've attached a Named Style class with a name of "hover" to my Tree object, which I have applied within my unselectedStyle object. Note that our application of Perspective Named Styles within sessions is done with a psc- prefix, so you'll see the style name applied as psc-Hover, and the "hover" state specified as :hover.
Even though The Named Style and element state is appropriately attached, the specificity required to target our unselected nodes which are being hovered over overrides the applied Named Style.
Ah okay, no wonder I couldn't find it! Thanks for looking into this and I appreciate the help 
1 Like
