<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` # 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. This is the default behaviour. All input will go to the game. 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. 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: visible⤶ ⤶ If an active panel has this style then the cursor is forced to be visible. Clicking on this panel will pass through onto the panel below. If no panel is hovered then the input will go to the game.⤶ ⤶ ⤶ ##pointer-events: auto ⤶ If the cursor is enabled this panel will accept and block input, but it won't force the cursor to be visible on its own. ⤶ 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; } ```