Full version, Basic version

Specification link: 6.7 Styling with CSS

styling-css-05-b ← index → styling-inherit-01-b

# styling-css-06-b
SVG Image | PNG Image
$RCSfile: styling-css-06-b.svg,v $ svg:hover {fill: none} text {fill: black} :link {fill: #33F} :visited {fill: rgb(138, 43, 226)} text:active {text-decoration: underline; fill: red } :hover {fill: rgb(255, 140, 0) } rect:hover {fill: none } text#revision:hover {fill: black} :focus { fill: rgb( 0, 255, 127) } Visited Unvisited Hover me And me, too! Select me $Revision: 1.5 $ |

Tests the dynamic pseudoclasses :link, :visited, :active, :hover and :focus. For the test to work, you must have previously visited ../linkingToc-t.svg which you can do by traversing the "Visited" link, then going back to this test file.

The links marked "Visited" and "Hover me" should now be purple, while the "Unvisited" link is blue.

If you do not have a pointing device, or if it provides pick but not hover (eg a stylus on a PDA) skip the hover portion of the test and mark this part as passed. Hover the pointing device over the "Hover me" and then, over the "And me, too!". As each of the two text strings text is hovered, it should turn a dark orange color while the other string should be black.

If the device you are using does not support text selection, eg a mobile phone, you may skip this part of the test and consider this partpassed. Finally, select some of the "Select me" text. As you do so, the whole "Select me" text should turn pale green.

Because this is a dynamic test a single static image cannot fully capture all the states. The reference image simulates the state during the third subtest. Visited and unvisited links have the appropriate blue and purple colors. The color and presentation of the selected text are user-agent dependent, but the unselected part of the "Select me" text must be red and underlined.

styling-css-05-b ← index → styling-inherit-01-b