Layered button problem


First post here, got a question:

I made a button that resembles a row in a list. As soon it gets a mouseover event it shows a rectangle on the lowest layer to 'highlight' the row. What also happens is that I reveal 2 buttons that mimick new functionality. If the mouse leaves the row a mouse out event causes the animation to revert back to the original state.

Everything works fine until I move my mouse over one of the icons on the right. The highlight (lowest) layer loses focus and it falsely thinks the mouse is not on it any more (except the mouse is on the icon a layer higher). I know this is how it should work though, but I need the row to stay highlighted!

How can you deal with something like this?

Hope I made sense!

Btw these are my layers:

CleanShot 2022-04-04 at 20.55.48@2x

Just nest the buttons inside a group. Put the mouse over/out actions on the group.



I knew I was missing something! Great elegant answer, much obliged!