Steps to reproduce
- 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.
- Ensure that the browser window is short enough such that the page becomes scrollable.
- Scroll the page about halfway down.
- Using your mouse, move the pointer so that it is over the button.
- Observe that the button turns red since the :hover CSS style now applies.
- 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)
- Observe that the button remains red, indicating that the element is still in the :hover state (which is incorrect).
- 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.
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
Dev Channel specific:
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”
Re-filed against Edge, instead of IE11, as https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7108183/
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.