UI Text Color change using OnPointerEnter/Exit

Unity Engine
,
1

Hello,

I’m trying to change the color of a Text UI Element on Mouse Hover, i’m using OnPointerEnter & OnPointerExit to set the color to white on enter and grey on exit. this is a very simple code i wrote just to demonstrate :

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class ButtonTest : MonoBehaviour,IPointerEnterHandler, IPointerExitHandler
{
    [SerializeField] private Text _text;

    public void OnPointerEnter(PointerEventData eventData)
    {
        Debug.Log("Enter");
        _text.color = new Color(255,255,255,255);
    }

    public void OnPointerExit(PointerEventData eventData)
    {
        Debug.Log("Exit");
        _text.color = new Color(100,100,100,255);
    }
}

This code is attached to a button that is the parent of this Text
when i hover over the Text the color changes correctly but when i exit the hover the color doesn’t change to grey and stays white.

I can’t seem to figure out what’s causing this issue is there something i’m missing here?
Thank you guys for your help.

2

Hey, I tried it out and you’re right that with that code it didn’t work, but when I replaced the “new Color(100,100,100,255)” by, for example, “Color.black” or “Color.blue” it did work, so I guess you just need to figure out a value for your Color that you’re happy with but overall what you’re trying to do should work. I tested it on Unity 2020.1.0f1.

3

Hello,thank you for your answer,
Indeed it does work that way, but one should be able to use any color. I have found a workaround that involves resetting the color on exit before setting the new one. I’ll post my code later during the day.
Thanks again:)

4

So OnPointerExit i call this method :

private void ResetTabs()
    {
        foreach (TabButton tabButton in tabButtons)
        {
            if (_selectedTab!=null && tabButton == _selectedTab) continue; // dont reset the currently selected tab
            tabButton._buttonImage.color = imageIdleColor;
            tabButton._buttonText.color = textIdleColor;
        }
    }

and at the beginning of each Event (Enter/Click) i fist call ResetTabs() then execute the piece of code that i want and this seems to be working perfectly.
Hope this helps someone who faces the same issue :slight_smile:

1 Like
5

Hello! I found a resolution to this as I was having the same issue. A fix is to change the new Color(); to new Color32(); which is able to use values from 0 to 255 while Color is 0.1f to 1f. Hope this works!