Getting Fancy - Jump Start CSS - page 130

We can accomplish this in CSS by using the :hover dynamic pseudo-class. It's "dynamic"
because it doesn't target an existing element; rather it targets an element in a given state (the
hover state). So let's add this pseudo-class to RecipeFinder, starting with all the links on the
page:
a {
text-decoration: none; color: #544a40;
}
a:hover {
text-decoration: underline;
}
First, we're placing our :hover styles after the existing global link styles. Although we
didn't opt to use the :link , and :visited pseudo-classes, were we to use them, we would
have to ensure that they were placed before our : hover styles. This is because all those
pseudo-classes have equal specificity. We want the :hover styles to override the others, so
they need to appear after any original :link and :visited styles targeting the same ele-
ments.
The other thing to notice is that we're changing the value of the text-decoration prop-
erty. This is a common technique. So, as depicted in Figure 5.2 , whenever a user hovers over
any link on the page, the text in that link will appear with an underline.
Figure 5.2. The : hover pseudo-class in action