<?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-1.xml" title="Groups of selectors"/>
  <link rel="prev" href="css3-modsel-164.xml" title=":focus with ::selection"/>
  <link rel="next" href="css3-modsel-166.xml" title=":first-letter with ::first-letter"/>
  <link rel="last" href="css3-modsel-d5e.xml" title="NEGATED :indeterminate with :checked"/>
  <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-166.xml" title=":first-letter with ::first-letter">==&gt;</a>
    </th>
   </tr>
   <tr>
    <td class="b">W3C Selectors</td>
    <td class="c" colspan="2">258 of 302</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>