Cascading Style Sheets (CSS) give designers greater control over the appearance of web pages, allowing them to easily change the default colour and remove the underlines from a page's links to more closely blend with the rest of the text on a page. With thoughtful use of colour and typography, links can be made less of a visual disruption, creating pages that are more aesthetically pleasing and text that is easier to read.
However, if the style of a page's links is too close to that of the text on the rest of the page, it can be difficult for users to see the links at all. In particular, users who have poor eyesight or are colour blind might have trouble finding the links on an otherwise well designed page.
The pseudo-class selector :hover is commonly
used to create a rollover effects on links, often changing them from a subtle
to more obvious contrast with the surrounding text. While this can be helpful
for users looking for hard to find links on a page, it still requires they
move their cursor over the link before it is revealed.
Modern browsers are now beginning to support the :hover
pseudo-class to create rollover effects on other elements as well. This
lets us create a rollover effect on a paragraph, or other section of
text. Being able to set the style for an element's rollover state also allows
us to control the style of elements within the element that is being
rolled over. The links within a paragraph which might be subtle and unobtrusive,
can be revealed by moving the cursor over the entire paragraph.
As of this writing most web browsers, including all versions of Internet
Explorer, only supports the :hover pseudo-element
on links. Hopefully this will change in future versions. Until then, the
following example will work in Mozilla,
Netscape 6+, Opera 7,
Safari,
and Konqueror.
Mouse over the paragraph below to reveal the links:
human evolution
theory of the origins of the human species, Homo sapiens. Modern understanding of human origins is derived largely from the findings of paleontology, anthropology, and genetics, and involves the process of natural selection (see Darwinism). Although gaps in the fossil record due to differential preservation prevent the complete specification of the line of human descent, H. sapiens share clear anatomical, genetic, and historic relationships to other primates. Of all primates, humans bear particularly close affinity to other members of a group known as hominoids, or apes, which includes orangutans, gibbons, gorillas, chimpanzees, and humans. Humans and their immediate ancestors, known as hominids, are notable among hominoids for their bipedal locomotion, slow rate of maturation, large brain size, and, at least among the more recent hominids, the development of a relatively sophisticated capacity for language, tool use, and social activity.
Here is an example of the CSS used to create this effect:
/* Paragraph text */
p {
color: #333333
}
/* Links within paragraphs (subtle) */
p a {
color: #666666;
text-decoration: none;
}
/* Links within paragraphs (revealed) */
p:hover a {
color: blue;
text-decoration: underline;
}
/* Rollover effect for links within paragraphs */
p a:hover {
color: red;
}