v149 · CSS · Selectors · Top Layer

Interaction Scope Demo

Chrome 149 stops :hover, :active, and :focus-within from leaking upward through top-layer elements. Hovering a popover or dialog no longer triggers :hover on an unrelated parent card. This demo shows the boundary in action.

:hover boundary — popover over card

Open the popover, then move your cursor over it. In Chrome 149+, the card below stays unhighlighted.

Article Card
This card highlights on :hover. Open the popover, then hover inside it — in Chrome 149 the card should NOT highlight.
Card :hover: inactive
:focus-within boundary — dialog inside container

The blue highlight on the container tracks :focus-within. Open the dialog and type — in Chrome 149 the outer container should NOT highlight.

:focus-within container (highlights blue when focused)
:focus-within inactive
Native modal dialog (top layer)
Typing here should NOT activate :focus-within on the outer container in Chrome 149+

event log

— interact with the demos above to see events —
Native popover (top layer)
Move your cursor over this text. In Chrome 149+, the card underneath should not show its :hover highlight — the top-layer boundary blocks upward propagation.

the rule

/* :hover used to propagate through the DOM tree unconditionally */
.card:hover { background: yellow; }

/* Before Chrome 149:
   Moving cursor over a popover above .card
   → .card:hover matched → card turned yellow (wrong!)

   Chrome 149+:
   Moving cursor over a popover
   → :hover stops at the top-layer boundary
   → .card:hover does NOT match (correct) */

/* Same for :focus-within — focus in a  no longer
   propagates :focus-within to the dialog's DOM ancestors */

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗