CSS :hover, :focus, and :active - Interactive States

Interactive State Pseudo-classes

The :hover, :focus, and :active pseudo-classes are fundamental for creating interactive, accessible user interfaces.

The LVFHA Order

When styling links, the pseudo-classes must be declared in a specific order to work correctly (mnemonic: LoVe/Fear/HAte):

a:link    { color: blue; }
a:visited { color: purple; }
a:focus   { outline: 2px solid; }
a:hover   { color: darkblue; }
a:active  { color: red; }

:hover

Applies when the user places their cursor over an element:

.btn:hover {
  background: #0056b3;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

Mobile note: :hover on touch devices triggers on tap and persists until the user taps elsewhere. Do not hide important content behind :hover.

:focus

Applies when an element receives focus (click, tab, or programmatic):

input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
  outline: none;
}

:focus-visible

Like :focus, but only applies when the browser determines focus should be visible (typically keyboard navigation):

button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Remove default outline for mouse users */
button:focus:not(:focus-visible) {
  outline: none;
}

:active

Applies during the moment of activation (mouse button down, key press):

.btn:active {
  transform: scale(0.98);
  box-shadow: none;
}

Accessibility

• Never remove focus indicators without providing an alternative
• Use :focus-visible to show outlines only for keyboard users
• Ensure hover states have sufficient color contrast
• Provide non-hover alternatives for touch devices
• Transition duration should be short (150-200ms) for responsiveness