Hover interaction issue

Ask the community
1

On my site, I have a map with different locations marked, and when you hover on the button, I want the project name to appear next to it. However, in areas where the project name of one city overlaps the button to the right of the city. (see below)

985×584 62.7 KB

This means that when I hover over the button on the right(in the middle of Kansas), the project name does not appear since the project name from the other city is in technically in front of the button.

966×579 40 KB

Is there a solution to make this work better?

2

you can use bring to front on this button, but at the same time, it could be in front of containers on hoover, so for example this and small container repositioning

3

Yes. You’d have to play with the arrangement a bit.

Something else you could try since I think you are using the transparency to create the hover effect is instead of triggering the opacity is maybe using the scale or a combination of the opacity and translate so the text container is out of the way.