Hover what you can click

Put hover on the link and stretch it over the row.

Josh W. Comeau@joshwcomeau.com
🌠 UX Rule of thumb: any hover interactions should always be on the *interactive* element (eg. link or button), not on its parent. Otherwise, you can run into bugs where the user *thinks* the link is being hovered, but it actually isn’t. Like this bug on OpenAI’s website:
Feb 27, 2025View on Bluesky ↗

1 · Hover that lies

Hover or tap the padding, then click. Count what lands.

Parent highlightsBad
    .row:hover { background }Missed clicks0Opened0
    Link is the targetGood
      a:hover::after { background }Missed clicks0Opened0
      .row  { position: relative; }
.link::after { content: ""; position: absolute; inset: 0; }   /* whole row clicks */
.link:hover::after { background: var(--tint); }              /* and it highlights */

      Why it matters, pros and cons

      Why it matters

      A hover style is a promise that a click will work. Put it on the element that actually receives the click.

      Pros

      • The highlight and the hit area always match, so no dead zones inside a row.
      • A stretched ::after makes the whole row clickable without nesting links.
      • Keyboard focus can use the same area, so mouse and keys look consistent.

      Cons

      • Other controls inside the row need position: relative and a higher z-index.
      • Selecting text inside a stretched row gets harder.
      • Only one primary link per row; secondary actions have to sit above it.