<?xml-stylesheet href="../../../style/xhtml-full.css" type="text/css"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>:hover with ::selection</title>
  <meta name="author" content="Ian Hickson"/>
  <link rel="stylesheet" type="text/css" href="../../../style/xhtml-full.css"/> <!-- yes this means compliant UAs get to import this twice -->
  <style type="text/css"><![CDATA[
  p { border: solid thick gray; }
  p:hover { border: solid thick green; }
  p::selection { background: silver; color: black; }
  p:hover::selection { background: lime; color: black; }
]]></style>
  <link rel="first" href="css3-modsel-18.xml" title=":hover pseudo-class"/>
  <link rel="prev" href="css3-modsel-164.xml" title=":focus with ::selection"/>
  <link rel="next" href="css3-modsel-177a.xml" title="Parsing : vs ::"/>
  <link rel="last" href="css3-modsel-177a.xml" title="Parsing : vs ::"/>
  <link rel="up" href="./index.html"/>
  <link rel="top" href="../../../index.html"/>
 </head>
 <body>
  <table class="testDescription">
   <tr>
    <th class="b">CSS 3 Module</th> <!-- XXX hard coded to say CSS 3 -->
    <th class="c" colspan="2">
     <a href="css3-modsel-164.xml" title=":focus with ::selection">&lt;==</a>
     Test #
     <a href="css3-modsel-177a.xml" title="Parsing : vs ::">==&gt;</a>
    </th>
   </tr>
   <tr>
    <td class="b">W3C Selectors</td>
    <td class="c" colspan="2">18 of 19 of the interactive tests category</td>
   </tr>
   <tr>
    <th class="b">Testing</th>
    <th class="a">Date</th>
    <th class="a">Revision</th>
   </tr>
   <tr>
    <td class="b">:hover with ::selection (ID #165)</td>
    <td class="a">2001-11-21</td>
    <td class="a">1.0</td>
   </tr>
  </table>
  <p class="WARNING">NOTE: User interaction is required for this test.</p>
  <div class="testSource">
   <div class="testText">
   <p>Select some of this
   paragraph, then move your pointing device around. While it is above
   the paragraph, the selection should be green. While the pointing
   device is elsewhere, the selection should be silver. The
   paragraph&#39;s border should at all times be a darker colour than the
   selection&#39;s background. Repeat the test with everything
   selected.</p>
</div>
   <pre class="rules">
  p { border: solid thick gray; }
  p:hover { border: solid thick green; }
  p::selection { background: silver; color: black; }
  p:hover::selection { background: lime; color: black; }
</pre>
   <pre class="rules">
   &lt;p&gt;Select some of this
   paragraph, then move your pointing device around. While it is above
   the paragraph, the selection should be green. While the pointing
   device is elsewhere, the selection should be silver. The
   paragraph&amp;#39;s border should at all times be a darker colour than the
   selection&amp;#39;s background. Repeat the test with everything
   selected.&lt;/p&gt;
</pre>
  </div>
 </body>
</html>