Hover parent, animate child

Listen for hover on a still parent, and animate a child.

Emil Kowalski@emilkowalski
You might've seen this bug before where the hover state keeps flickering. The fix is to separate the trigger from the effect. Listen for hovers on the parent, but animate a child element instead. This ensures that the hover area stays consistent.
Jan 27, 2026View on X ↗

From emil-design-eng; demo 1 rebuilds his post’s video.

Cards that lift on hover

Park the cursor at the edge, then raise Cursor past Lift.

Hover on the cardBad
Plan Pro $24 / mo
.card:hover { transform }0 enters
Hover on the parentGood
Plan Pro $24 / mo
.slot:hover .card { transform }0 enters
<div class="card-slot">
  <div class="card">…</div>
</div>

.card { transition: transform 200ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .card-slot:hover .card { transform: translateY(-12px); }
}

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

A nav item that slides

Park the cursor on the left edge of Invoices.

The row slidesBad
.item:hover { transform }0 enters
Only the label slidesGood
.item:hover .label { transform }0 enters
<button class="nav-item"><span class="nav-label">Invoices</span></button>

.nav-label { display: inline-block; transition: transform 160ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .nav-item:hover { background: var(--accent-soft); }
  .nav-item:hover .nav-label { transform: translateX(10px); }
}
.nav-item:focus-visible .nav-label { transform: translateX(10px); }

Why it matters, pros and cons

Why it matters

Hover re-tests the moved box, so a moving trigger slips off the cursor.

Pros

  • No flicker at any edge.
  • Hit area matches what you see.
  • Same pattern covers :focus-visible.

Cons

  • One extra wrapper or span per target.
  • Unneeded for color, opacity or outward scale.