HTML and CSS Reference
In-Depth Information
Causing an underline to appear on all text links on hover is fine for the footer links and the
sidebar links, but the effect is not as visually pleasing on some of the other areas of the page,
such as the main navigation and the text on the buttons. In order to target those and change
them, we'll have to add some rule sets using :hover that are higher in specificity. Let's start
with the main navigation:
nav a {
color: #fefefe;
}
nav a:hover {
text-decoration: none;
color: #cdb8a5;
}
In this new rule set, we're removing the underline on hover and changing the color to
#cd-
b8a5
(which is a color sampled from the textured background of RecipeFinder). Because
the header doesn't yet have a background color, the text will look as though it disappears on
hover. This'll improve later in this chapter when we add the correct background.
Let's fix the
:hover
styles on the two buttons:
.promo-btn:hover {
text-decoration: none;
}
We're not adding any color change to the button text on hover. We'll do something different
for them later on in the chapter. Lastly, let's correct the underline that appears below the
linked text in all the entries in the “Latest Recipes” section:
.media a {
text-decoration: none;
}
.media a:hover h2,
.media a:hover p {
