hover-001-manual.html (2167B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>CSS Test (Selectors): hover pseudo-class when scrolling</title> 6 <link rel="author" title="Chris Rebert" href="http://chrisrebert.com" /> 7 <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-hover-pseudo" /> 8 <link rel="help" href="http://www.w3.org/TR/selectors/#the-user-action-pseudo-classes-hover-act" /> 9 <meta name="flags" content="interact scroll" /> 10 <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." /> 11 <style> 12 button { 13 background-color: white; 14 color: black; 15 } 16 button:hover { 17 background-color: blue; 18 color: white; 19 } 20 div { 21 height: 2000px; 22 width: 100px; 23 } 24 </style> 25 </head> 26 <body> 27 <ol> 28 <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> 29 <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> 30 <li>Ensure that this document is scrolled all the way to the top.</li> 31 <li>Hover the pointer device over the button below.</li> 32 <li>If the button is not blue, then the test result is FAILURE.</li> 33 <li> 34 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: 35 <ul> 36 <li>Press the "Page Down" key on the keyboard.</li> 37 <li>Press the "↓" key on the keyboard.</li> 38 <li>Roll the mouse's scrollwheel.</li> 39 <li>Perform a "scroll down" gesture on the trackpad</li> 40 </ul> 41 </li> 42 <li>If the button is blue, then the test result is FAILURE. If the button is white, then the test result is SUCCESS.</li> 43 </ol> 44 <br /> 45 <button>Hover over me.</button> 46 <div></div> 47 </body> 48 </html>