Changing country/region border colour and width on hover

You are here:

How to

In the current version, it’s not possible to change the region/country border colour 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 neighbouring region’s border is overlapping it and therefore we won’t see the size/colour change or only see part of it and therefore the behaviour 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 colour code for your map empty regions. The ‘stroke’ value is the color code you want when the region/country is hovered.

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

Preview