Hover tricks can turn a clean data table into a flickering nightmare. While adding an “Actions” column that appears on row hover, the author noticed that slow mouse movements or crossing the thin 1‑pixel border between rows caused the UI to flash or show two rows at once. At first glance, a CSS glitch seemed likely, but the culprit turned out to be JavaScript’s mouse‑event model.

Two families of hover events exist: mouseover/mouseout, which bubble and fire when the pointer enters or leaves an element or any of its children, and mouseenter/mouseleave, which do not bubble and fire only when the pointer enters or leaves the element itself. Using the bubbling pair on a table row means moving between child buttons triggers a false “mouseout” that hides the actions, producing flicker. Switching to mouseenter/ mouseleave eliminates the false exits, keeping the row’s state stable.

The lesson extends to dropdowns, tooltips, and any hover‑driven UI: choose the non‑bubbling events unless child‑specific behavior is required.