Button Hovered Loses Focus

Unity Engine
, , ,
1

I have a Button - TextMeshPro using Sprite Swap, and I wanted behavior where when the button is selected or hovered, an icon would appear next to it, like this.

I did this by having two images, a blank one for the regular states, and one with the icon in it. Here’s the images.

As you can see, the top one is quite literally a blank png, I don’t think that part is related, but I included it anyways.

When I hover the mouse over the button, the icon appears fine, but if I move from the icon to over the text, it stops being registered as hovered. Does anyone know why this is happening, and how to fix it?

The text is a child of the Button.

2

What version of unity are you using? There is a bug in unity 2021.2.17-2021.3.5 (and probably a few other versions including 2022 series) breaking how pointer enter exit events work for child elements. It got fixed in 2021.3.6. See Unity Issue Tracker - Button isn't highlighted when the mouse re-enters the Button's Child Image, which is set as Button's Target Graphic

If you can’t update to 2021.3.6 or 2021.3.7 (both of which have buggy nested canvases), there is relatively simple workaround. Disable raycast target property for all the child Images and Text elements, leave it enabled only for top element of the button. In case of TextMeshPro components raycast target property is hidden under advanced properties or something like that (don’t remember the exact names).

1 Like
3

Thanks for the response! I am on version 2021.3.0f1. Your workaround seems to have worked! Some easy solution I didn’t have the brain power at the time to process. Still giving you brownie points.