HTML and CSS Reference
In-Depth Information
color: #b32c1c;
}
These hover styles are a little different. In this case, we're targeting elements that are inside
our
<a>
elements (the
<h2>
and
<p>
elements). So the
:hover
class is part of a selector
that uses the descendant combinator (the space character). The text color chosen for the hov-
er state is, again, a color sampled from the Photoshop file. In some cases, the original design
may indicate hover states, but in this project we're using our own judgment to choose the
hover states.
For now, that should cover some of the simple hover states we're adding to RecipeFinder.
We'll add a few more later in this chapter when we tackle a few other techniques.
Transitions
A CSS feature that works nicely with the
:hover
pseudo-class is the transition property.
The transition property allows you to change the values of CSS properties over a specified
duration, animating the properties as they change from one state to another.
For example, look at the hover color changes we just added to the main navigation and the
“Latest Recipes” section. Hover the mouse over those links and the color change happens
instantly. With a CSS transition, we can make the color change occur gradually. Here's how
we'll do it on the navigation links:
nav a {
color: #fefefe;
transition: color .4s ease-out;
}
nav a:hover {
text-decoration: none;
color: #cdb8a5;
}
This new declaration we've added is a shorthand property that represents the following
longhand properties:
