Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Test (Selectors): hover pseudo-class when scrolling</title>
<meta name="flags" content="interact scroll" />
<meta name="assert" content="Scrolling away from an element that was hovered over should cause the :hover pseudo-class to no longer match said element." />
<style>
button {
background-color: white;
color: black;
}
button:hover {
background-color: blue;
color: white;
}
div {
height: 2000px;
width: 100px;
}
</style>
</head>
<body>
<ol>
<li>If the user-agent does not claim to support the <code>:hover</code> pseudo-class (e.g. the pointing device cannot detect hovering), then SKIP this test.</li>
<li>If the user-agent does not allow scrolling the document while leaving the pointer in the same position relative to the viewport, then SKIP this test.</li>
<li>Ensure that this document is scrolled all the way to the top.</li>
<li>Hover the pointer device over the button below.</li>
<li>If the button is not blue, then the test result is FAILURE.</li>
<li>
Scroll this document down while not moving the pointer at all, until the pointer no longer touches the button. For example, on a traditional desktop or laptop computer, keep the mouse perfectly still and do one of the following:
<ul>
<li>Press the "Page Down" key on the keyboard.</li>
<li>Press the "↓" key on the keyboard.</li>
<li>Roll the mouse's scrollwheel.</li>
<li>Perform a "scroll down" gesture on the trackpad</li>
</ul>
</li>
<li>If the button is blue, then the test result is FAILURE. If the button is white, then the test result is SUCCESS.</li>
</ol>
<br />
<button>Hover over me.</button>
<div></div>
</body>
</html>