CSS :hover Pseudo-Class

CSS :hover Pseudo-Class

The CSS :hover pseudo-class selects an element when a pointing device, such as a mouse, is positioned over it. It is commonly used to change colors, backgrounds, borders, and other visual properties to provide interactive feedback.

:hover Syntax

selector:hover {
  property: value;
}

The :hover pseudo-class is added to a selector without a space. The declarations apply while the element matches the hover state.

Basic Example

button:hover {
  background-color: #006699;
}

This rule changes a button's background color when the pointer hovers over it.

Hovering Over Links

a:hover {
  color: #cc3300;
}

This rule changes a link's text color when hovered.

Hovering Over a Class

.card:hover {
  border-color: #0088cc;
}

This rule applies to any element with the card class while it is hovered.

How :hover Works

The :hover pseudo-class represents a temporary interaction state. The browser determines whether the pointer is positioned over an element and applies matching CSS rules.

Default Appearance

button {
  background-color: #0088cc;
  color: #fff;
}

Hovered Appearance

button:hover {
  background-color: #005f8f;
}

When the pointer moves over the button, its background changes. When the pointer moves away, the button returns to its default appearance.

Parent and Child Elements

An ancestor element can also match :hover when the pointer is over one of its descendants.

.card:hover .card-title {
  color: #0088cc;
}

This rule changes the title color when the pointer is over the card or one of its descendants.

No JavaScript Required

Basic hover effects are handled by CSS. JavaScript is not required to change an element's visual appearance during hover.

Common Uses

The :hover pseudo-class is commonly used to provide visual feedback for links, buttons, cards, and navigation items.

Link Colors

a {
  color: #006699;
}
a:hover {
  color: #cc3300;
}

The link changes color when hovered.

Button Backgrounds

button {
  background-color: #0088cc;
  color: #fff;
}
button:hover {
  background-color: #005f8f;
}

The darker background provides feedback when the pointer is over the button.

Card Borders

.card {
  border: 1px solid #ccc;
}
.card:hover {
  border-color: #0088cc;
}

The card border changes color during hover.

Navigation Items

nav a {
  color: #333;
  text-decoration: none;
}
nav a:hover {
  color: #0088cc;
  text-decoration: underline;
}

Navigation links can change appearance to indicate which item is under the pointer.

Images

.thumbnail {
  opacity: 1;
}
.thumbnail:hover {
  opacity: 0.75;
}

The image becomes partially transparent when hovered. This effect is best used when it does not reduce the visibility of important content.

Hover Transitions

The CSS transition property can animate changes between an element's default and hovered styles.

Smooth Background Change

button {
  background-color: #0088cc;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: #005f8f;
}

The background color changes gradually instead of immediately.

Multiple Properties

.card {
  border: 1px solid #ccc;
  background-color: #fff;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.card:hover {
  border-color: #0088cc;
  background-color: #eaf6fc;
}

Both the border and background colors transition smoothly.

Where to Place the Transition

Place the transition declaration on the base selector so the animation works when the pointer enters and leaves the element.

Reduced Motion

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}

Use the prefers-reduced-motion media feature to reduce or remove nonessential motion for users who request it.

:hover vs. :active

The :hover and :active pseudo-classes represent different interaction states.

Comparison

Example

button:hover {
  background-color: #006699;
}
button:active {
  background-color: #004466;
}

The button changes to one color when hovered and another while activated.

Combined States

An element can match both :hover and :active at the same time. When declarations conflict, the cascade determines which value applies.

:hover vs. :focus

The :hover pseudo-class responds to pointing devices, while :focus responds to keyboard focus and other forms of focus.

Comparison

Hover and Focus Styles

button:hover,
button:focus-visible {
  background-color: #005f8f;
}

This rule gives pointer and keyboard users similar visual feedback.

Focus Outline

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

A visible outline helps keyboard users identify the focused button.

Touch Devices

Touchscreens do not always provide a persistent pointer hover state. Browsers may ignore hover styles, apply them briefly, or keep them active after a tap.

Hover-Capable Devices

@media (hover: hover) {
  button:hover {
    background-color: #005f8f;
  }
}

The hover: hover media query checks whether the primary input mechanism can conveniently hover over elements.

Fine Pointers

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    border-color: #0088cc;
  }
}

This rule targets devices whose primary input supports convenient hovering and fine pointing accuracy.

Touch-Friendly Design

Do not make essential content or actions available only through hover. Ensure that touchscreen and keyboard users can access the same functionality.

Hybrid Devices

Some devices support both touch and mouse input. Media queries describe input capabilities, but they do not guarantee which input method a person is currently using.

:hover Specificity

The :hover pseudo-class contributes a specificity of 0-1-0.

Specificity Examples

Link State Order

a:link {
  color: #006699;
}
a:visited {
  color: #663399;
}
a:hover {
  color: #cc3300;
}
a:active {
  color: #993300;
}

When these selectors have equal specificity, the order shown allows hover styles to override link and visited styles, while active styles can override hover styles.

This is commonly remembered as the LVHA order: Link, Visited, Hover, Active.

Accessibility

Hover effects can improve visual feedback, but they must not be the only way to access important content or understand an element's purpose.

Keyboard Accessibility

Provide equivalent focus styles for interactive elements so keyboard users receive clear feedback.

Touch Accessibility

Ensure that actions remain available without requiring a mouse or hover-capable device.

Avoid Hover-Only Information

Do not place essential instructions or controls exclusively inside hover-triggered content unless an equivalent accessible interaction is available.

Readable Contrast

Check text and background contrast in both default and hovered states.

Focus Visibility

Do not remove focus outlines without providing a clearly visible replacement.

Best Practices

• Use :hover to provide clear visual feedback for interactive elements.
• Keep hover effects consistent throughout the website.
• Provide equivalent keyboard focus styling where appropriate.
• Do not rely on hover for essential content or functionality.
• Use transitions for subtle visual changes rather than distracting animations.
• Consider the hover and pointer media features for device-specific effects.
• Maintain sufficient color contrast in every interaction state.
• Test hover behavior with mouse, keyboard, and touchscreen input.

:hover Example

This example demonstrates hover effects on a button, a link, and a card. Move the pointer over each element to see its appearance change. The button and link also provide keyboard focus feedback.

HTML

<div class="hover-demo">
  <button type="button">Hover Over Me</button>
  <p><a href="https://www.kdwhd.com/">Hover Over This Link</a></p>
  <div class="hover-card">Hover Over This Card</div>
</div>

CSS

.hover-demo button {
  padding: 10px 15px;
  border: 0;
  background-color: #0088cc;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.hover-demo button:hover,
.hover-demo button:focus-visible {
  background-color: #005f8f;
}
.hover-demo a {
  color: #006699;
  transition: color 0.3s ease;
}
.hover-demo a:hover,
.hover-demo a:focus-visible {
  color: #cc3300;
}
.hover-card {
  padding: 15px;
  border: 2px solid #ccc;
  background-color: #f5f5f5;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.hover-card:hover {
  border-color: #0088cc;
  background-color: #eaf6fc;
}
@media (prefers-reduced-motion: reduce) {
  .hover-demo button,
  .hover-demo a,
  .hover-card {
    transition: none;
  }
}

Browser Result

Play in Editor

Note: Hover effects depend on the input device. On touchscreens, the behavior may differ from a desktop mouse.

Browser Support

Baseline: Widely available. The :hover pseudo-class is supported in Chrome, Edge, Firefox, Safari, and other modern browsers. Its behavior on touch devices may vary.

For current compatibility information, visit Can I Use? and search for :hover.

Specifications

The :hover pseudo-class is defined in CSS Selectors Level 4 as a user action pseudo-class. The specification describes how it matches elements designated by pointing devices.

Selectors Level 4 - :hover