Hover

Definition

Hover is the state that appears while the mouse pointer is sitting on top of an element. The background might darken a little, a soft shadow might lift the element off the page, or the cursor might switch to a pointing hand — each of these quietly says "this is something you can click." Because it happens in the moment right before a click, users lean on it to check whether a spot will actually respond before they commit to pressing it. In that sense hover is the shortest first exchange between the screen and the person using it. Almost anything that does something when you press it — buttons, links, cards, menu items — carries some kind of hover response.

Why does it matter?

Every second, users are quietly deciding what is clickable and what is just plain text sitting on the screen. When a hover response is there, moving the mouse over an element settles that question instantly, so people move on to their next action without hesitating. When something looks like a button but does nothing on hover, users second-guess whether it is really clickable and pause for a beat. Those tiny hesitations pile up and make the whole screen feel sluggish and unresponsive. A well-tuned hover clearly reveals where the clickable areas are, which speeds up navigation and reassures people that the screen is alive and reacting to them. This matters most in lists and tables, where row after row looks nearly identical — simply tinting the row under the pointer makes it obvious which item you are looking at, and that alone cuts down on wrong clicks. In this way, hover acts like a finger you point with your eyes, marking exactly where you are.

Common mistakes

• Hiding important information or features behind hover alone. Touch devices have no pointer, so hover never fires there, which means the menu or explanation you tucked inside it stays permanently out of reach for phone users.
• Making the hover effect far too dramatic. If the color flips hard or the element jumps up sharply, the screen jolts every time the mouse grazes past, which distracts the eye and quickly becomes tiring rather than helpful.
• Adding a hover response to things that cannot be clicked, like body text or a plain background. When something reacts but does nothing when pressed, users click, get no result, and grow confused — and their trust in which elements are genuinely clickable starts to wobble.

Practical tips

• Treat hover strictly as a supporting signal, and make sure anything truly important is reachable with a plain click or tap on its own. If you always assume touch devices have no hover, every user ends up with access to the same features.
• Keep hover changes restrained — nudge the color and shadow just a little. A subtle shift actually reads as more polished, and it is far easier to apply consistently across many different elements.
• A hover state should only ever appear when the mouse is over an element; when someone moves through the page with a keyboard, let the focus indicator take over instead, and design the two states separately.

Related concepts