- Home /
How do you highlight/select a button upon mouse enter and keep it moused over upon mouse exit?
As the title says I'm looking for a method to highlight/select a button upon mouseover and keep it from deselecting upon moving the mouse away from the button.
My reasoning for wanting to do this is so that I can give the user the ability to use the mouse or keyboard to select buttons. With the default EventSystem and Canvas if you create a Canvas object and put some buttons in then assign one as the first selected button you can navigate the buttons using keyboard input but if one of the buttons is moused over and the cursor leaves then the button is no longer highlighted/selected therefore you lose the ability to use the keyboard to navigate the menu.
I want the user to be able to use the mouse to select a button by mousing over it then if they like they can switch to using the keyboard and be able to navigate the menu from the button they selected via mouseover.
I'm wondering if there is a built in system that I'm missing which would be able to solve my issues or if I will have to implement a script to achieve the functionality I'm looking for.
Does anybody here know a way for me to do this?
Answer by Nrin · Aug 29, 2016 at 04:53 AM
Okay guys I found a fix for this, here's what I did: 1) Add a canvas group component to the text child of the buttons in the UI and unticked interactable and blocks raycasts. 2) I created a script to make sure that if the UI loses focus it immediately refocuses to the last button which was selected. Here's the code I wrote and stuck on a GameObject which serves as my game controller:
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
using System.Collections;
public class GameController : MonoBehaviour {
EventSystem eventSystem;
GameObject lastSelectedObject;
void Awake() {
eventSystem = GameObject.Find("EventSystem").GetComponent<EventSystem>();
}
void Update() {
ReselectButton();
}
void ReselectButton() {
if (eventSystem.currentSelectedGameObject != null) {
lastSelectedObject = eventSystem.currentSelectedGameObject;
}
if (eventSystem.currentSelectedGameObject == null) {
eventSystem.SetSelectedGameObject(lastSelectedObject);
}
}
}
3) I made a script and attached it to each button. This script detects when the mouse enters and leaves a button and changes the selected button to the one currently hovered over:
using UnityEngine;
using UnityEngine.EventSystems;
using System.Collections;
using System;
public class ButtonScripts : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler{
EventSystem eventSystem;
GameObject lastSelectedObject;
// Use this for initialization
void Start () {
eventSystem = GameObject.Find("EventSystem").GetComponent<EventSystem>();
}
public void OnPointerEnter(PointerEventData eventData) {
eventSystem.SetSelectedGameObject(eventData.pointerEnter);
lastSelectedObject = eventSystem.currentSelectedGameObject;
}
public void OnPointerExit(PointerEventData eventData) {
eventSystem.SetSelectedGameObject(lastSelectedObject);
}
}
This achieves the desired result for the most part. I'm still playing around with some scripts and settings to get it perfect but for now this works.
Your answer
Follow this Question
Related Questions
UI: Mouse events not working 1 Answer
UI Button multiple parameters 6 Answers
Click/touch object to enable/disable buttons inside Canvas 1 Answer
How to set UI button as selected on mouse over 1 Answer
Move gameobject to button in new 4.6? 0 Answers