• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

12. Visual Effects for Stationary Content > 12.5. Creating Custom Link Styles

Creating Custom Link Styles

NN 6, IE 4

Problem

You want links on the page to respond to rollovers and clicks differently than the default browser behavior.

Solution

Take advantage of CSS pseudo-classes for a elements that let you define separate style sheet rules for various states of a link. The following example displays the text of an a element in a dark reddish-brown except when the user clicks down on the link, at which point the background and text color invert. Also, the link does not display the traditional underline except while the cursor passes atop the link:

<style type="text/css">
a:link {color:#993300; background-color:#ffffff; text-decoration:none}
a:visited {color:#993300; background-color:#ffffff; text-decoration:none}
a:active {color:#ffffff; background-color:#993300; text-decoration:none}
a:hover {text-decoration:underline}
</style>

PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint