Inspecting hover-driven interfaces in DevTools can sometimes be very tricky. Many sites use JavaScript to control hover states, which means the usual “Force state > :hover” option doesn’t always work. The moment you move your mouse away, the element disappears, making it difficult to examine its structure or styles.
A simple workaround is to briefly disable JavaScript while the hover element is active. Open DevTools, move your cursor over the element that triggers the hover card, and once it appears, press Cmd+Shift+P, search for “Disable JavaScript,” and hit Enter. With scripts paused, the hover card stays visible, giving you the chance to inspect and debug it without frustration.
This small trick can save a lot of time when working with dynamic UI elements. It ensures that what you’re inspecting reflects the actual hover state, without the interference of event listeners that would normally make it vanish.
