Runnable CSS Docs: Hover

Q: How do I add a hover effect in CSS?

Write a rule with :hover after the selector: .btn:hover { background: #1d4ed8; }. The declarations apply while the pointer is over the element. Add transition: background 0.2s; to the normal rule to animate the change.

Q: What is the difference between :hover and :active?

:hover applies while the pointer is over the element. :active applies while it is being pressed, from mouse button down to release. A pressed button is usually both hovered and active.

Q: What order should link pseudo-classes be in?

:link, :visited, :hover, :active (remember LVHA, or "LoVe HAte"). They have equal specificity, so the later rule wins; in any other order a visited or hovered style can hide the hover or active style.

Q: How do I change the link color in CSS?

Style the a element: a { color: #2563eb; }, then a:visited { color: #7c3aed; } and a:hover { color: #1d4ed8; } for the other states. Setting color on a covers both unvisited and visited links.

How :hover works

:hover is a pseudo-class that matches an element while the mouse pointer is over it. Add it to any selector and write the styles for the hovered state:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover</title>
  <style>
    .btn {
      background: #2563eb;
      color: white;
      border: 0;
      padding: 10px 18px;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
    }
    .btn:hover {
      background: #1d4ed8;
    }
  </style>
</head>
<body>
  <button class="btn">Hover me</button>
</body>
</html>

Only the declarations in the :hover rule change; everything else carries over from .btn. When the pointer leaves, the element returns to its normal styles.

Smooth hover effects with transition

A hover change is instant unless you add transition to the normal rule (not the :hover rule), so it animates both in and out:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover transition</title>
  <style>
    .card {
      width: 220px;
      padding: 16px;
      border: 2px solid #e5e7eb;
      border-radius: 10px;
      background: white;
      transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    }
    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(17, 24, 39, 0.15);
      border-color: #2563eb;
    }
  </style>
</head>
<body>
  <div class="card">Hover the card: it lifts, gains a shadow and a blue border.</div>
</body>
</html>

transform and opacity are the cheapest properties to animate; they do not move the elements around them. Animating width, height or margin makes the page reflow on every frame. Durations, delays and easing curves are on the CSS transition page.

Link colors: :link, :visited, :hover, :active

Links have four classic states, plus keyboard focus, and the order of the rules matters:

Pseudo-class	Applies when
`:link`	The link has not been visited
`:visited`	The URL is in the browser history
`:hover`	The pointer is over it
`:active`	It is being pressed
`:focus-visible`	It has keyboard focus

All of these have the same specificity, so the later rule wins when two match. A visited link that is hovered matches both :visited and :hover; if :visited comes last, the hover color never shows. The safe order is Link, Visited, Hover, Active (LVHA):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link states</title>
  <style>
    a:link    { color: #2563eb; }
    a:visited { color: #7c3aed; }
    a:hover   { color: #16a34a; text-decoration-thickness: 3px; }
    a:active  { color: #f59e0b; }
    a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <p><a href="https://example.com/never-visited-page">Hover, then press and hold this link</a></p>
</body>
</html>

Browsers limit what :visited can change, to stop pages from reading your history. Only color-related properties (color, background-color, border-color, outline-color and a few others) take effect, and scripts always see the unvisited value.

:active: the pressed state

:active matches while the element is being pressed. A small movement makes a button feel physical:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Active</title>
  <style>
    .btn {
      background: #16a34a;
      color: white;
      border: 0;
      padding: 10px 18px;
      border-radius: 6px;
      box-shadow: 0 4px 0 #166534;
      transition: transform 0.05s, box-shadow 0.05s;
    }
    .btn:hover { background: #15803d; }
    .btn:active {
      transform: translateY(4px);
      box-shadow: 0 0 0 #166534;
    }
    .btn:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
  </style>
</head>
<body>
  <button class="btn">Press me</button>
</body>
</html>

Hovering a parent to style a child

The hover state belongs to the element under the pointer and every ancestor of it. So .card:hover .title styles the title whenever any part of the card is hovered, and the same idea reveals hidden elements:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover parent</title>
  <style>
    .item {
      display: flex;
      justify-content: space-between;
      border: 1px solid #e5e7eb;
      padding: 10px;
      width: 260px;
    }
    .item .actions { opacity: 0; transition: opacity 0.15s; }
    .item:hover .actions,
    .item:focus-within .actions { opacity: 1; }
    .item:hover { background: #eff6ff; }
    .item:hover .name { color: #2563eb; }
  </style>
</head>
<body>
  <div class="item">
    <span class="name">report.pdf</span>
    <span class="actions"><button>Delete</button></span>
  </div>
</body>
</html>

The :focus-within line matters: without it, a keyboard user tabbing to the Delete button would press an invisible button. Pair every hover-reveal with a focus rule.

Hover on touch screens

Phones and tablets have no pointer that rests over an element. Most mobile browsers apply :hover on the first tap and keep it until you tap somewhere else, so a hover style can appear stuck. Two rules keep this under control:

Never put the only way to reach content behind :hover. A menu that opens on hover also needs to open on click.
Wrap purely decorative hover effects in a media query that checks for a real hover device:

@media (hover: hover) {
  .card:hover { transform: translateY(-4px); }
}

Common mistakes

A space before the colon. .btn :hover means "a hovered element inside .btn". Write .btn:hover.
transition only on the :hover rule. It then animates in but snaps back on the way out. Put it on the normal rule.
Wrong link order. Keep :link, :visited, :hover, :active in that order.
Hover with no focus style. Keyboard users never trigger :hover; give interactive elements a :focus-visible style too.
Hover on an element covered by another. An invisible overlay (often an absolute pseudo-element) can catch the pointer. pointer-events: none on the overlay fixes it.

Frequently Asked Questions

How do I add a hover effect in CSS?

Write a rule with :hover after the selector: .btn:hover { background: #1d4ed8; }. The declarations apply while the pointer is over the element. Add transition: background 0.2s; to the normal rule to animate the change.

What is the difference between :hover and :active?

:hover applies while the pointer is over the element. :active applies while it is being pressed, from mouse button down to release. A pressed button is usually both hovered and active.

What order should link pseudo-classes be in?

:link, :visited, :hover, :active (remember LVHA, or "LoVe HAte"). They have equal specificity, so the later rule wins; in any other order a visited or hovered style can hide the hover or active style.

How do I change the link color in CSS?

Style the a element: a { color: #2563eb; }, then a:visited { color: #7c3aed; } and a:hover { color: #1d4ed8; } for the other states. Setting color on a covers both unvisited and visited links.

Does hover work on mobile?

Touch screens have no pointer to rest over an element. Most mobile browsers apply :hover on tap and keep it until you tap elsewhere, which can leave a hover style stuck. Wrap hover-only effects in @media (hover: hover) and never hide essential content behind hover.

Related concepts