CSS :hover Pseudo-class — Interactive Mouse-Over Styles

CSS :hover Pseudo-class

The :hover pseudo-class applies styles when the user positions their pointing device (typically a mouse cursor) over an element.

Syntax

a:hover {
  color: #0066cc;
  text-decoration: underline;
}

.button:hover {
  background-color: #333;
  transform: translateY(-1px);
}

Combining with Transitions

Hover states are most effective when paired with CSS transitions:

.card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

LVHA Order

When styling links, follow the LVHA order to avoid specificity conflicts:

a:link    { }  /* unvisited */
a:visited { }  /* visited */
a:hover   { }  /* mouse over */
a:active  { }  /* being clicked */

Accessibility Considerations

• Touch devices: :hover may not work or may "stick" on mobile
• Use @media (hover: hover) to apply hover-only styles
• Always ensure interactive elements are also styled for :focus
• Don’t rely on hover for essential information disclosure

@media (hover: hover) {
  .card:hover {
    transform: scale(1.02);
  }
}

:hover on Non-Interactive Elements

You can use :hover on any element (div, span, etc.), but screen readers won’t announce hover states on non-interactive elements. Use it for visual enhancement only, not for critical functionality.

Specificity

:hover adds (0, 1, 0) to specificity, the same as a class selector.