Hi,
I was trying to make a basic game menu that highlight entry when mouse hover on them, I am using onPointerEnterObservable and onPointerOutObservable and I am changing the outlineColor and outlineWidth, but I it seems that setting the outlineWidth to zero doesn’t make it invisible.
Here my code.
How I can fix it? BTW, it is the right way to implement it or there is a more idiomatic and performant way?
Thank you.
I guess it is because your control is eating all the space 
@msDestiny14 can help fixing it
Uhm, it seems that the problem is that onPointerOutObservable is never called (even if I am moving out the mouse), so it is not related to outlineWidth.
Maybe @sebavan you have already realized, so my note is not relevant.
Not quite 
It does have to do with the size. Let me show
https://www.babylonjs-playground.com/#E5IMCJ#1
This is the fixed playground. The problem was that the text was taking up the entire screen size. Width 100% and height 100% (100% by 100% is the default for textBlock btw). Because it took up the entire screen the mouse never has a chance to leave so onPointerOutObservable is never called.
Now there are a couple of ways to fix this. You can manually change the width and height. What I think works best for your case is resizeToFit = true; (line 35). What this will do is set the container’s size to match however long the text will be. This is better when you need accurate collision.
Finally last helpful tip for the inspector. There is this draw debug lines button that helps to show where the collision box actually is (the light blue) This might help in future
Once I did the fix this is what it now looks like:
