topic Re: How to set the hover background color on the Compass widget in ArcGIS JavaScript Maps SDK Questions

How to set the hover background color on the Compass widget

BradBarnell — Wed, 25 Oct 2023 18:35:48 GMT

In a .css file, how do you set the hover background color for the Compass widget?

calcite-button.esri-widget--button:hover { --calcite-ui-???: red; }

Re: How to set the hover background color on the Compass widget

JoelBennett — Thu, 26 Oct 2023 18:03:17 GMT

If you're using 4.27 (and likely some prior versions), this would do it:

div.esri-compass:hover { background-color: #FF0000; }

However, due to the increased integration with Calcite and that this widget now uses a shadow DOM in 4.28, it's not possible to alter this property via a CSS selector.

Re: How to set the hover background color on the Compass widget

BradBarnell — Thu, 26 Oct 2023 22:25:29 GMT

Yep, I'm using 4.28. I was able to change the icon hover color with css, just not the hover background.

Re: How to set the hover background color on the Compass widget

Dirk_Vandervoort — Wed, 04 Dec 2024 18:18:23 GMT

Bumping this thread because we have encountered the same issue at 4.31

.esri-widget--button:hover { background-color: red!important; }

has no impact.