Skip to main content
All CollectionsCustomization
How to Change Country/Region Border Color and Width on Hover
How to Change Country/Region Border Color and Width on Hover
James avatar
Written by James
Updated over a week ago

How to

In the current version, it’s not possible to change the region/country border color on hover. We currently don’t offer this feature because when changing the size/color of only one region’s border, it’s possible that the neighboring region’s border is overlapping it and therefore we won’t see the size/color change or only see part of it and therefore the behavior won’t be consistent.

However, if you want to add this feature you still can, using custom CSS. The only thing you need to get first is the color code for your ‘inactive’ regions, which is the ‘Empty Color’ option in the default values for regions. Once you have that value, you can add this to the Custom CSS of your site (using the Customizer for example) or the Custom CSS of your map (PRO only):

.imapsMapPolygon-group:not[fill^='#e0e0e0']:hover { stroke-width:2px; stroke:#6699CC; }

In the above example, the color code #e0e0e0 would need to be replaced with the color code for your map empty regions. The ‘stroke’ value is the color code you want when the region/country is hovered.

Remember that the behavior for this is not consistent, so use this at your own risk. This is not a feature officially supported by the plugin.

Preview

Did this answer your question?