# Customizing on hover color for Tree **URL:** \ **Category:** Ignition\ **Tags:** ignition81, perspective\ **Created:** [November 8, 2022, 7:26pm UTC](https://forum.inductiveautomation.com/t/customizing-on-hover-color-for-tree/66250 "2022-11-08T19:26:32Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![agriner](https://avatars.discourse-cdn.com/v4/letter/a/b2d939/32.png) [@agriner](https://forum.inductiveautomation.com/u/agriner)\ **Post date:** [November 8, 2022, 7:26pm UTC](https://forum.inductiveautomation.com/t/customizing-on-hover-color-for-tree/66250/1 "2022-11-08T19:26:32Z")
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? ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [November 8, 2022, 8:50pm UTC](https://forum.inductiveautomation.com/t/customizing-on-hover-color-for-tree/66250/2 "2022-11-08T20:50:02Z")
Probably not a direct property, but should be possible with an appropriately targeted :hover selector... @victordcq @cmallonee🙂 ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [November 8, 2022, 11:23pm UTC](https://forum.inductiveautomation.com/t/customizing-on-hover-color-for-tree/66250/3 "2022-11-08T23:23:02Z")
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: 1. Create a Named Style. 2. Click the `+` icon. 3. Select `Element State`. 4. Use the Element State dropdown to select "hover". 5. Under "Shape", set the fill (or stroke if you want to change the outline of the symbols) property to whatever color you want. 6. Save your changes. 7. under whichever piece of the Tree you're looking to change, add a new property under `style` and name this new property "classes". 8. Use the dropdown available to this classes property to select your new Named Style. ---
**Author:** ![agriner](https://avatars.discourse-cdn.com/v4/letter/a/b2d939/32.png) [@agriner](https://forum.inductiveautomation.com/u/agriner)\ **Post date:** [November 9, 2022, 7:58pm UTC](https://forum.inductiveautomation.com/t/customizing-on-hover-color-for-tree/66250/4 "2022-11-09T19:58:51Z")
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. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/2/42438088155c985d620877460502ffbdf391f5db.png) ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [November 9, 2022, 8:24pm UTC](https://forum.inductiveautomation.com/t/customizing-on-hover-color-for-tree/66250/5 "2022-11-09T20:24:53Z")
Oh, the background highlighting? I don't know how you would control that off of the top of my head. Let me ask around. ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [November 9, 2022, 8:51pm UTC](https://forum.inductiveautomation.com/t/customizing-on-hover-color-for-tree/66250/6 "2022-11-09T20:51:27Z")
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. ```auto .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`. ![Screenshot 2022-11-09 at 12.47.44 PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/4/d45ef855a5809f9eebe02ab7afbe8adf5a5f445e.png) 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. ---
**Author:** ![agriner](https://avatars.discourse-cdn.com/v4/letter/a/b2d939/32.png) [@agriner](https://forum.inductiveautomation.com/u/agriner)\ **Post date:** [November 9, 2022, 9:19pm UTC](https://forum.inductiveautomation.com/t/customizing-on-hover-color-for-tree/66250/7 "2022-11-09T21:19:49Z")
Ah okay, no wonder I couldn't find it! Thanks for looking into this and I appreciate the help đź‘Ť ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [November 10, 2022, 7:25am UTC](https://forum.inductiveautomation.com/t/customizing-on-hover-color-for-tree/66250/8 "2022-11-10T07:25:44Z")
> [@cmallonee](#): > > 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. You can add `!important` after the color. Then it wont be overruled (unless an other !important is used in a more specific selector) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/f/6f3a18957c3cd8a1d4bfb27d411066cd5c14e255.png)