<title>Enabling Pointer Events</title> <cat>UI.Intro</cat> Whether the cursor is visible and whether your panels can be clicked/hovered is controlled by the css property `pointer-events` # Values ## pointer-events: none No pointer events. Even if the cursor is visible because of the style on another panel you won't be able to click on this panel, your clicks will go through it as if it's not there. If there are no panels below this then input will go to the game. This is the default behaviour. ## pointer-events: all Force the cursor visible and active. The mouse input will never go to the game for this panel. If a panel with this style is visible then the cursor will be visible. ##pointer-events: auto Inherit the event from its ancestors. # Scenario ## Spawnmenu Add `pointer-events: all` when spawnmenu open key is pressed. The suggested way would be to add a class to your root panel called something like `spawnmenuopen`. Then you can have this style for your spawnmenu. ``` .spawnmenuopen spawnmenu { pointer-events: all; opacity: 1; } ``` ## Pointer passthrough to game To show the pointer and still allow mouse input to the game, you can add `pointer-events: all` to some panel with a width and height of 0. This way you still show the cursor, but no panel will steal your input. In most cases, you will also need to add `pointer-events: none` to your rootpanel. To show the pointer and still allow mouse input to the game, you can add `pointer-events: all` to some panel with a width and height of 0. This way you still show the cursor, but no panel will steal your input. ⤶ ```⤶ @using Sandbox;⤶ @using Sandbox.UI;⤶ @inherits PanelComponent⤶ ⤶ <root>⤶ ⤶ </root>⤶ ⤶ ```⤶ CursorPassthroughComponent.razor is just an empty razor component that you can add to your Screen Panel.⤶ ``` MyRootPanel {⤶ pointer-events: none; } ⤶ .pointer-visible { CursorPassthroughComponent⤶ { width: 0; height: 0; pointer-events: all; } ``` CursorPassthroughComponent.razor.scss will ensure the panel has a size of 0, and pointer events enabled.