v149 · CSS · demo

Hover Boundary Demo

Move your cursor over the cards below and open the popover. In Chrome 149, hovering inside the popover does not trigger :hover on the underlying card — the top layer acts as a boundary.

Card grid — cards highlight on :hover
:hover
Article 1
Click the button to open a popover above this card.
:hover
Article 2
With the popover open, move your cursor here.
:hover
Article 3
Watch whether :hover activates on these cards.
Event log
Move cursor over cards — events appear here.
Top-layer popover
In Chrome 149, moving your cursor within this popover does not trigger :hover on Card 1 below (even though this popover is a child of that card in the DOM tree).

Move your cursor around inside this box and watch the event log.

Why this matters

A dropdown menu, tooltip, or popover is typically a DOM child of the element that triggered it — but it's visually rendered above everything else in the top layer. Before Chrome 149, hovering the popover would also trigger :hover on the triggering card, causing unexpected highlight effects. Chrome 149 introduces a boundary: :hover propagation stops at the top-layer element. 
/* This :hover rule now only triggers when the cursor is
   physically over the card, NOT when it's inside a
   top-layer child (popover, dialog, fullscreen). */
.card:hover {
  background: var(--bg-ivory);
  box-shadow: var(--flat-shadow);
}

/* The popover is in the top layer; hovering it
   no longer propagates :hover up to .card */
.popover-content {
  /* top layer = boundary for ancestor :hover */
}

see also

implementation reference

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