UI:Toggle Highlighted state stay on even when mouse isn't over the toggle

Unity Engine
1

Hi.

First sorry for any mistake I could make since I’m not fluent in english

My goal is to have several clickable icon representing a spell in my game.
When I click an icon I make it the active spell.
So i want to reflect this visually on my UI.

I choose UI:toggle for this purpose as i want my icon to have different state :

  • normal (unselected)
  • highlighted when mouse is over the toggle
  • selected

Each state have a different sprite (the same icon with a different border).

Normal :

Highlighted :

Selected :

I place my UI:toggle on a movable(drag) panel.

I choose Sprite Swap transition :
As target graphic → Background image I choose Normal.
As Highlighted Sprite I choose Highlighted.
As Pressed Sprite I choose Selected.
As Disable Sprite I choose Normal.

Finally as toggle->Background->Checkmark source image I choose Selected.

This issue I have is that while all is fine (highlighted when mouse is over, normal else) when i click the toggle (it goes Selected) and reclick it (deselect), it stay as Highlighted state even when my mouse isn’t over !

I have to click somewhere to make my toggle switch back to Normal …

Is that a bug ?

Here is my default panel, pointer is not over the toggle :

When I place my pointer over the toggle, the sprite change accordingly :

I click the toggle :

Then I reclick it and place my pointer elsewhere the toggle (not over) :

It stay Highlighted state …

better with a video :

https://vimeo.com/168083306

I hope I was clear enough to describe my issue.

If you can help me to have a correct highlighted transition after clicking the toggle.

1 Like
2

I’m still having my issue.
It is look like a bug of Unity, can someone confirm that or explain why the state Highlighted stay on after clicking a toggle ?

3

It’s a “feature”. If you have navigation on with the buttons, the latest clicked object stays as the selected one even after moving the mouse away. If you don’t need key navigation you can set the button component’s navigation to none, which fixes this.

4 Likes