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

Chapter 7. Pseudo-Classes and Pseudo-Elements > focus and hover Pseudo-Classes

7.6. focus and hover Pseudo-Classes

The focus and hover pseudo-classes are meant to convey information to the user whenever a cursor passes over a selected Web element, and are always associated with the anchor tag (“<a>”). With the focus pseudo-class, the cursor will change to indicate that the Web element it is associated with has “focus” (meaning that it is available to take user input in some form). The hover pseudo-class indicates to the user that the element the cursor has passed over can be “activated” in some way. These new pseudo-classes are closely associated with the link, visited and active pseudo-elements introduced under CSS1. Listing 7.4 shows how this might be put to use within the header of a given Web page; the effects are seen in Figure 7-4.

Listing 7.4. focus and hover Pseudo-Class Example Code

<html>
<head>
<title>:hover and :focus Example</title>
<style>
a:link {color: red} /* Unvisited links */
a:visited {color: blue} /* Visited links */
a:active {color: lime} /* Active links */
a:hover {color: yellow} /* User Hover over link turns it yellow */
a:focus {color: green} /* User focus on a link turns it green */

body {font-family: Arial, Helvetica, sans-serif; font-size: 40px; font-weight: bold}
</style>
</head>

<body>
<a href="link1.html">Here's a link</a>.
<a href="link2.html">Here's another link</a>.
<a href="link3.html">And another link</a>.
</body>
</html>


					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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