<title>Enabling Pointer Events</title> <cat>Dev.UI</cat> Whether the cursor is visible and whether your panels can be clicked/hovered is controlled by the css property `pointer-events` # Default By default your panels are not clickable. If you spawn them as part of your HUD cursor is hidden and the mouse input goes to the game. By default, your panels are not clickable. If you spawn them as part of your HUD cursor is hidden and the mouse input goes to the game. To interact with the UI you need to enable pointer events on your panel or one of its ancestors. # Example So say you want to have a spawnmenu type UI panel in your hud. ``` public partial class SpawnMenu : Panel { public static SpawnMenu Instance; } ``` By default you'll have it hidden. By default, you'll have it hidden. ``` spawnmenu { opacity: 0; } ``` This is fine. Then you'll probably have something like this in your player tick ```cs SpawnMenu.Instance?.SetClass( "open", Input.Down( InputButton.Menu ) ); ``` This is looking for the spawnmenu instance, if it's not null and the button "InputButton.Menu" is down, it adds the class "open" to the panel. If it's not down it removes the class. So now you need to update the stylesheet so that if the spawnmenu has the class "open" it'll be visible. ``` spawnmenu { opacity: 0; &.open { opacity: 1; } } ``` This works. Now your spawnmenu becomes visible while you're holding down the menu button. But you want the cursor to become visible and be able to interact with the menu. We can do that. ``` spawnmenu { opacity: 0; &.open { opacity: 1; pointer-events: all; } } ``` What if you want it the opposite? What if you want the menu always visible unless you're holding down the menu key? Well you could just change the `SetClass` code above by adding a ! in front of the Input, but you could also do it purely via the stylesheets. What if you want it the opposite? What if you want the menu always visible unless you're holding down the menu key? Well, you could just change the `SetClass` code above by adding a ! in front of the Input, but you could also do it purely via the stylesheets. ``` spawnmenu { opacity: 1; pointer-events: all; &.open { opacity: 0; pointer-events: none; } } ```