demo · v149
Multi-Popover Hover Test
Open three nested popovers above a host card. In Chrome 149, hovering inside any popover does not trigger :hover on the host card or on outer popovers — each top-layer element stops the pseudo-class from propagating up through the DOM. A live state table and event log capture every mouseenter/mouseleave transition.
This card turns blue when hovered. In Chrome 149, hovering inside any of the three popovers above does not trigger :hover on this card.
| Element | Open | :hover (direct) | Boundary |
|---|---|---|---|
| Host card | — | no | N/A |
| Popover L1 | closed | no | — |
| Popover L2 | closed | no | — |
| Popover L3 | closed | no | innermost |
Hovering here — host card :hover should stay off
Hovering here — L1 :hover should stay off
Hovering here — L1 and L2 :hover should stay off
Hover event log
/* Chrome 149: :hover stops at the top-layer boundary */
/* This DOES light up when you hover the card directly */
.host-card:hover { background: lightblue; }
/* This does NOT light up when you hover inside popover-l1 */
.host-card:hover { ... }
/* Because popover-l1 is in the top layer, :hover propagation stops there.
Chrome 149 aligns with CSS Selectors Level 4:
user-action pseudo-classes match ancestors only up to the top-layer boundary */
/* Same for :focus-within and :active — they all respect the boundary */see also
- Hover Boundary Demo — basic :hover boundary with one popover
- Cascade Trace — colour-coded DOM tree showing where propagation stops
- Active Popover Test — :hover and :focus-within leak audit
- ChromeStatus: User action pseudo class top layer boundary
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗