CSS :hover Selector

What You’ll Learn

The :hover pseudo-class styles elements when the user moves a mouse or pointer over them. It is one of the most common tools for interactive web design.

Introduction

The :hover selector in CSS applies styles to an element when the user hovers over it with a pointing device, such as a mouse.

It is commonly used to enhance the interactivity of buttons, links, navigation items, and cards by changing their appearance on mouse-over, giving users immediate visual feedback.

Definition and Usage

Append :hover to a selector with no space before the colon: a:hover, button:hover, or .card:hover. Styles apply only while the pointer is over the element and revert when it moves away.

📝 Syntax

The syntax for the :hover pseudo-class is:

element:hover {
  /* CSS properties */
}

The :hover pseudo-class can be used on any HTML element, though it is most commonly applied to interactive elements like <a>, <button>, and navigation items.

Basic Example

.button {
  background-color: #2563eb;
  color: #fff;
  padding: 0.65rem 1.25rem;
  border-radius: 0.5rem;
  transition: background-color 0.25s ease;
}

.button:hover {
  background-color: #1d4ed8;
}

Common Properties on Hover

Syntax Rules

• Hover applies only while the pointer is physically over the element.
• Chain with other pseudo-classes: button:hover:focus.
• Place :active after :hover when both change the same property.
• Use cursor: pointer on clickable elements for better UX.
• Combine with transition for smooth, professional effects.

Related Selectors

• :active — styles while the element is being pressed
• :focus — styles when an element has keyboard focus
• :link — styles unvisited anchor tags
• :visited — styles visited anchor tags
• :focus-visible — keyboard-only focus rings

When to Use :hover

:hover improves interactivity and gives users clear feedback:

• Buttons — Darken or lighten the background so users know the button is interactive.
• Links — Change color or add an underline to show the text is clickable.
• Navigation menus — Highlight the menu item under the pointer.
• Cards and images — Add shadow, scale, or overlay effects on product or gallery tiles.
• Toolbars and icons — Subtle background changes on icon buttons.

Examples Gallery

Practice :hover with buttons, links, image cards, and navigation menus.

<style>
  .button {
    background-color: #2563eb;
    color: #fff;
    padding: 0.65rem 1.25rem;
    text-decoration: none;
    border-radius: 0.5rem;
    display: inline-block;
    transition: background-color 0.3s ease;
  }
  .button:hover {
    background-color: #1d4ed8;
  }
</style>

<a href="#" class="button">Hover over me</a>

a {
  color: #2563eb;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.card {
  border: 1px solid #e2e8f0;
  border-radius: 0.65rem;
  padding: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

nav a {
  color: #334155;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: 0.4rem;
  transition: background 0.15s ease;
}

nav a:hover {
  background: #eff6ff;
  color: #2563eb;
}

💬 Usage Tips

• Any element — Use :hover on div, cards, and images for rich interactive effects, not just links and buttons.
• Smooth transitions — Combine with transition or animation for polished color, shadow, and transform changes.
• Layer with :active — Add :active after :hover for a pressed-state color when the user clicks.
• cursor: pointer — Set on clickable elements so the mouse icon indicates interactivity.
• Touch devices — Do not hide essential actions behind hover-only UI; provide tap-friendly alternatives on mobile.

⚠️ Common Pitfalls

• Mobile and touch — :hover does not work reliably on touchscreens. Never depend on hover alone for critical functionality.
• Over-animation — Too many hover animations can distract users and hurt performance on low-end devices.
• Missing :focus styles — Keyboard users cannot hover; always pair interactive hover effects with :focus styles.
• Specificity order — If :active is declared before :hover, hover may override the pressed state unexpectedly.
• Sticky hover on touch — On some mobile browsers, the first tap triggers hover and a second tap activates the link. Test on real devices.

♿ Accessibility

• Do not rely on hover alone — Essential information and actions must be available without hovering.
• Provide :focus styles — Mirror or complement hover styles with visible :focus or :focus-visible indicators for keyboard users.
• Sufficient contrast — Hover color changes must still meet WCAG contrast requirements.
• Large touch targets — On mobile, ensure buttons and links are easy to tap without needing hover feedback.
• Reduced motion — Consider @media (prefers-reduced-motion: reduce) to disable large hover animations for sensitive users.

💡 Best Practices