Hover

Pseudo-class

:hover

Applies styles when the user hovers over an element with a pointing device.

Example

a:hover {
  color: blue;
  text-decoration: underline;
}
.card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

Specificity

0-1-0

Browser Support

All browsers

About the Hover

The :hover CSS selector belongs to the Pseudo-class category.Applies styles when the user hovers over an element with a pointing device. Understanding CSS selector specificity and combinators is essential for writing maintainable stylesheets that behave predictably.

The specificity of this selector is 0-1-0. CSS specificity determines which styles are applied when multiple rules target the same element. Higher specificity values take precedence. The specificity hierarchy from lowest to highest is: universal (*) → type/element → class/attribute/pseudo-class → ID → inline styles → !important.

Browser support for Hover is: All browsers. When using newer CSS selectors like :has(), :is(), or CSS nesting, consider providing fallback styles for older browsers. Use @supports to progressively enhance your stylesheets with modern features while maintaining backward compatibility.

Related Selectors

:focus :active :focus-visible