Hovering over an element and then scrolling without moving the mouse/pointer leaves the element in :hover state

Won’t fix Issue #640805


Jul 23, 2014
This issue is public.
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce


Repro Steps:

  1. Open http://jsfiddle.net/cvrhulu/er4LM/3/show in IE 11 on a Windows 8.1 desktop computer with a mouse and without any touch-based input device/method.
  2. Ensure that the browser window is short enough such that the page becomes scrollable.
  3. Scroll the page about halfway down.
  4. Using your mouse, move the pointer so that it is over the button.
  5. Observe that the button turns red since the :hover CSS style now applies.
  6. Keeping the mouse perfectly still, scroll the page via one of: (a) pressing a PgUp/PgDn keyboard key (b) pressing a ↑/↓ arrow keyboard key © rolling the mouse’s scrollwheel (if it has one)
  7. Observe that the button remains red, indicating that the element is still in the :hover state (which is incorrect).
  8. Move the mouse/pointer slightly and observe: (a) that the button stops being red, and (b) that the pointer is indeed not over the button.

Expected Results:

Hovering over an element and then scrolling the page (while still leaving the mouse/pointer in the same place) should cause the element to no longer be in the :hover state if it’s no longer under the pointer’s position.

Following the repro steps in Chrome 35 & Firefox 30 on Windows 8.1 & OS X 10.9, at step #7 you’ll instead observe that the button is NOT red.

Relevant spec: http://dev.w3.org/csswg/selectors4/#the-hover-pseudo

Actual Results:

Dev Channel specific:



0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Tony S.”

      Changed Assigned To from “Tony S.” to “Sermet I.”

      Changed Assigned To from “Sermet I.” to “IE F.”

      Changed Status to “Won’t fix”

      Changed Status from “Won’t fix” to “Fixed”

      Changed Status from “Fixed” to “Won’t fix”

    • Possibly related to this is the :hover sometimes badly behaves when dynamically changing content on the page using ajax. Often when I trigger the removal of an element completely from the page(often some menu system) revealing elements underneath and maybe move the mouse away quickly from the click point, an element below the click point gets stuck in a :hover state, until I move the mouse over it and out again.

    You need to sign in to your Microsoft account to add a comment.

    Sign in