v149 · CSS · Pseudo-classes
Active Popover Test
Test how :active and :focus-within behave when a popover is open. In Chrome 149, pressing a button inside the popover does not trigger :active or :focus-within on the host card behind it — the top-layer element acts as a boundary.
Host card — watch its :hover / :focus-within state as you interact with the popover
HOST CARD
Hover me to see :hover. Then open the popover and hover inside it.
host card :hover
inactive
host card :focus-within
inactive
popover state
closed
// Open the popover and interact — events logged here…
TOP-LAYER POPOVER
Pseudo-class leak table
| Action | Pre-Chrome 149 | Chrome 149+ |
|---|---|---|
| Hover inside popover | :hover leaks to host card | :hover stays inside popover |
| Click button inside popover | :active leaks to host card | :active boundary at popover |
| Focus input inside popover | :focus-within leaks to host card | :focus-within boundary at popover |
| Hover host card directly | :hover on host card ✓ | :hover on host card ✓ |
see also
- Hover Boundary Demo — :hover behaviour with a popover
- Focus-Within Dialog Boundary — :focus-within and <dialog>
- Cascade Trace — visualise pseudo-class propagation up the DOM tree
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗