v148 · CSS · Dialog · Popover

Nested Dialogs Demo

Open an outer dialog, hover its blue element, then open an inner dialog. In Chrome 148+, hovering inside the inner dialog does not propagate :hover back to the outer dialog element — the top-layer boundary blocks it.

What changed in Chrome 148: Previously, mouse hover state could "leak" through the top-layer stack — hovering over an open dialog caused :hover on elements in dialogs below it to activate. Chrome 148 respects the top-layer boundary: user-action pseudo-classes (:hover, :active, :focus-within) don't propagate across it, matching Firefox and Safari.
  1. Click Open outer dialog below
  2. Hover the blue element inside the outer dialog — it activates :hover
  3. Click Open inner dialog inside the outer dialog
  4. Move your mouse around inside the inner dialog — the outer blue element's :hover is now blocked by the top-layer boundary

Outer dialog (layer 1)

Hover me

Hover state on this element should NOT activate while the inner dialog is open (Chrome 148 fix).

Inner dialog (layer 2)

Moving your mouse here should block :hover on elements in the outer dialog.

Event log

Open the outer dialog to begin…

How the boundary works

/* Elements in lower top-layer entries don't get :hover
   while a higher entry (dialog, popover) is open */

/* Outer dialog button — Chrome 148: :hover blocked by inner dialog */
dialog.outer button:hover { background: blue; }

/* This rule fires as expected when outer dialog is topmost,
   but NOT when inner dialog is above it in the top-layer stack. */

/* Previously (pre-148), moving the mouse over the inner dialog
   would still activate :hover on elements in the outer dialog. */

references

implementation reference

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