[SOLVED] 2D UI button element hover

I have a button with a hover effect. On a button click, I disable the view and enable enother one. The issue, is that when I re-enable the view with that button, the button is shown with a hover effect on. I thought, perhaps since I disable the view, the button never received the hoverend event. So, I decided to manually deactivate the hover state on a view show, if it is enabled. Am I going the right way? Is it the normal practice?

However, when trying to listen for hoverend event, I never get it. I’ve created a sample project to demonstrate the issue:
https://playcanvas.com/project/660772/overview/temp

Hi @LeXXik,

I think that is expected, when disabling a parent entity all of its local hierarchy gets disabled as well. That will stop any child entity from receiving input.

You will have to manually fire your hoverend event handler or restructure your hierarchy/code to not disable the entities but just the rendered components. So as an end result you get the same but the listening entities remain enabled to continue receiving input events.

@Leonidas, right, it makes sense. If I disable the view, it stops getting the events. I need to work around it.

However, shouldn’t hoverend event fire, when the view is visible and I move my mouse out from the button? In my example, the result should output a test message to console, but it remains silent, as if there is no hovering taking place.

Yes, it should fire but it belongs to the ButtonComponent class not the ElementComponent class. So changing the event handler to this line will do the trick:

this.entity.button.on('hoverstart', this.hoverEnd, this); 
1 Like