Okuzeka
UX/UI Design vocabulary · Interaction Design

Hover state

Meaning in UX/UI design, with examples

nounCommon term

In UX/UI design, hover state means: The way an element looks when the mouse pointer is over it, for example a button getting darker, which shows that it can be clicked.

In Turkish: üzerine gelme durumu, hover durumu

How it is used

One of the standard component states, along with default, focus, pressed (active) and disabled. Designers define every state in the design system. Touchscreens have no hover, so it should never carry essential information.

Example sentences

  1. The links have no hover state, so they don't feel clickable on desktop.

  2. Please add hover states for the table rows before handoff.

Common collocations

  • add a hover state
  • hover effect
  • on hover
  • button states
  • focus stateThe visible style, usually an outline or ring, that shows which element is currently selected when someone moves through a page with a keyboard.
  • buttonA clickable or tappable element that lets users perform an action, such as submitting a form, saving changes or opening a menu.
  • tooltipA small text box that appears when users hover over, focus on or tap an element, giving a short explanation or the name of an icon.
  • microinteractionA small, single-purpose moment of interaction with its own feedback, such as liking a post, switching a toggle or a field shaking after a wrong password.

This word in other fields

The same English word can have a different meaning in another field:

More terms: Interaction Design

Practise with graded reading

Reading at the right level is the fastest way to make new words stick. Pick free English books by level: