House Sigils · Hovers

Q: How do I test content that only appears on hover?

Hover a sigil card (#hovers-sigil-1 … -3) and assert both the .revealed class and the visible [data-testid="hovers-caption"]. Keyboard focus does the same thing — the cards are tabindex=0 — which is the more reliable route in a headless run.

Hover or keyboard-focus each sigil card to reveal a name and profile link — a real class toggle, so visibility is honestly assertable.

Three house sigils. Their lords reveal themselves only to those who linger.

Hovers is a medium Mouse & Keyboard challenge on Fun UI Playground. Hover or keyboard-focus each sigil card to reveal a name and profile link — a real class toggle, so visibility is honestly assertable. It runs entirely in the browser, with no backend. Every interactive element carries a stable id and data-testid prefixed with “hovers-”, and the techniques it exercises are hover actions, assert revealed content, focus as hover fallback, hidden-element visibility.

At a glance

Category: Mouse & Keyboard
Difficulty: medium
Teaches: hover actions · assert revealed content · focus as hover fallback · hidden-element visibility
Backend: None — runs entirely in the browser
Locators: Stable id and data-testid, prefixed hovers-

Selectors on this page

Locator	What it is
`[data-testid="hovers-sigil"]` `#hovers-sigil-1`	Sigil cards: [data-testid="hovers-sigil"] with ids #hovers-sigil-1 … -3 (tabindex=0, focusable)
`[data-testid="hovers-caption"]`	Hover or focus adds the .revealed class and shows [data-testid="hovers-caption"] with the lord's name + a profile link
`#hovers-profile-`	Profile links navigate to a per-lord hash you can assert (#hovers-profile-N)

Frequently asked questions

How do I test content that only appears on hover?

Hover a sigil card (#hovers-sigil-1 … -3) and assert both the .revealed class and the visible [data-testid="hovers-caption"]. Keyboard focus does the same thing — the cards are tabindex=0 — which is the more reliable route in a headless run.

How do I assert that a hover was undone?

Move the pointer away or blur the card and assert the caption is hidden again. Both directions matter: a test that only checks the reveal passes happily against a tooltip that never disappears.

More Mouse & Keyboard

Updated 2026-09-07

Fun UI Playground — all challenges, bug hunts, getting started, glossary, about.