CSS 3 Module | <== Test # ==> | |
---|---|---|
W3C Selectors | 1 of 19 of the interactive tests category | |
Testing | Date | Revision |
:hover pseudo-class (ID #18) | 2005-10-20 | 1.2 |
NOTE: User interaction is required for this test.
The background color of this paragraph should turn to green when the mouse pointer hovers either its text (here) or its whitespace background, here:
The background color of this anchor (here) should turn to green when the pointing device hovers over it.The cells in | this table | should go |
green when | you hover | the pointing |
device over | them (here). | |
The rows in | this table | should go |
dark green | when the | pointing device |
is over the | cells there: | |
And here: | (blank cells). |
p:hover { background-color : lime } a:hover { background-color : lime } tr:hover { background-color : green } td:hover { background-color : lime } table { border-spacing: 5px; }
<p>The background color of this paragraph should turn to green when the mouse pointer hovers either its text (<strong>here</strong>) or its whitespace background, <strong>here</strong>:</p> <address>The background color of <a href="#foo">this anchor (<strong>here</strong>)</a> should turn to green when the pointing device hovers over it.</address> <table> <tbody> <tr> <td>The cells in</td> <td>this table</td> <td>should go</td> </tr> <tr> <td>green when</td> <td>you hover</td> <td>the pointing</td> </tr> <tr> <td>device over</td> <td>them (<strong>here</strong>).</td> <td></td> </tr> <tr> <td>The rows in</td> <td>this table</td> <td>should go</td> </tr> <tr> <td>dark green</td> <td>when the</td> <td>pointing device</td> </tr> <tr> <td>is over the</td> <td>cells <strong>there</strong>:</td> <td></td> <!-- remove this cell to make an evil test; row should still go green, but cell should not --> </tr> <tr> <td>And <strong>here</strong>:</td> <td></td> <td>(blank cells).</td> </tr> </tbody> </table>