Skip to content

Commit 7b0686a

Browse files
ianbjacobsianbjacobs
committed
[css2] Added hover pseudo-class for links. Added example for tooltip.
--HG-- extra : convert_revision : svn%3A73dc7c4b-06e6-40f3-b4f7-9ed1dbc14bfc/trunk%40241
1 parent 46d3d0a commit 7b0686a

1 file changed

Lines changed: 71 additions & 19 deletions

File tree

‎css2/selector.src‎

Lines changed: 71 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
22
<html lang="en">
3-
<!-- $Id: selector.src,v 1.21 1997-10-03 22:22:24 ian Exp $ -->
3+
<!-- $Id: selector.src,v 1.22 1997-10-20 03:03:30 ian Exp $ -->
44
<head>
55
<meta http-equiv="Content-Type" content="text/html;
66
charset=ISO-8859-1">
@@ -824,22 +824,43 @@ descend from A elements that have not yet been visited:</p>
824824
</div>
825825

826826
<h3>Anchor pseudo-classes:
827-
<span class="index-def" title="pseudo-classes, :link|:link">:link</span>,
828-
<span class="index-def" title="pseudo-classes, :visited|:visited">:visited</span>,
829-
and
830-
<span class="index-def" title="pseudo-classes, :active|:active">:active</span>
827+
<span class="index-def" title="pseudo-classes,
828+
:link|:link">:link</span>,
829+
<span class="index-def"
830+
title="pseudo-classes, :hover|:hover"> pseudo-classes,
831+
:hover|:hover</span>
832+
<span
833+
class="index-def" title="pseudo-classes,
834+
:active|:active">:active</span>, and
835+
<span class="index-def"
836+
title="pseudo-classes, :visited|:visited">:visited</span>,
831837
</h3>
832838

833839
<p>User agents commonly display unvisited links differently from
834-
previously visited ones. In CSS2, authors may refer to three
835-
categories of links: visited, unvisited, and a currently selected
836-
link (e.g., by the mouse). Each category of link has a corresponding
837-
pseudo-class:</p>
840+
previously visited ones. CSS2 allows authors to specify the rendering
841+
of a link in one of several states:
842+
843+
<ul>
844+
<li> The ':link pseudo-class applies for links that have
845+
not yet been visited.
846+
<li> The ':hover pseudo-class applies when the user designates,
847+
but does not activate, a link. User agents may require a minimal
848+
time delay before considering that a user has designated a link.
849+
<li> The ':active' pseudo-class applies while the link is being
850+
activated by the user.
851+
<li> The ':visited' pseudo-class applies once the link has been
852+
visited by the user. <strong>Note.</strong>
853+
After a certain amount of time, user agents may choose to
854+
return a visited link to the (unvisited) 'link' state.
855+
</ul>
856+
857+
<P>The four states are mutually exclusive.
838858

839859
<pre>
840-
A:link { color: red } /* unvisited link */
841-
A:visited { color: blue } /* visited links */
842-
A:active { color: lime } /* active links */
860+
A:link { color: red } /* unvisited links */
861+
A:active { color: yellow } /* user hovers */
862+
A:active { color: lime } /* active links */
863+
A:visited { color: blue } /* visited links */
843864
</pre>
844865

845866
<p>User agents are not required to reformat a currently displayed
@@ -850,13 +871,6 @@ should be larger that a 'visited' link, but the UA is not required to
850871
dynamically reformat the document when the reader selects the
851872
'visited' link.</p>
852873

853-
<div class="note"><p>
854-
<em><strong>Note.</strong>
855-
user agents may choose to move an element from
856-
'visited' to 'link' after a certain time.
857-
</em></p>
858-
</div>
859-
860874
<div class="example"><p>
861875
In HTML, the following two CSS2 declarations are equivalent and
862876
select the same elements:</p>
@@ -867,6 +881,44 @@ select the same elements:</p>
867881
</pre>
868882
</div>
869883

884+
885+
<div class="example"><P>
886+
The following example illustrates how authors specify a "tooltip" (a
887+
brief message that is rendered temporarily) that will only appear when
888+
the user hovers over a specific link. A link to the table of contents
889+
has a "normal" rendering (the content of the HTML anchor element A)
890+
and a tooltip that is rendered when the user hovers over the
891+
link. Visual user agents render a 30em-wide tooltip up and to the left of the
892+
A element's content. Here is the source HTML:
893+
894+
<PRE>
895+
&lt;A href="tableofcontents.html"&gt;
896+
&lt;SPAN class="relative-position"&gt;
897+
&lt;SPAN class="tooltip"&gt;
898+
Return to the table of contents.
899+
&lt;/SPAN&gt;
900+
&lt;/SPAN&gt;
901+
[Table of Contents]
902+
&lt;/A&gt;
903+
</PRE>
904+
905+
<P>Here is the style sheet:
906+
907+
<PRE>
908+
span.tooltip {
909+
display: none
910+
}
911+
span.relative-position {
912+
position: relative
913+
}
914+
a:hover span.tooltip {
915+
position: absolute;
916+
top: -20px; left: 20px;
917+
width: 30em
918+
}
919+
</PRE>
920+
</div>
921+
870922
<h3>Pseudo-elements and pseudo-classes with attribute selectors</h3>
871923

872924
<p>Pseudo-classes can be combined with normal classes. In this case,

0 commit comments

Comments
 (0)