- Hi, this is Chris Converse and in this episode, we'll
add a little extra interactivity to our hyperlinks
by adding a second nested hover state.
This technique can add a little extra information
or interest for people who are exploring your webpage
with a mouse or a trackpad.
Without changing the behavior of these links on
touch devices.
So if you'd like to follow along with me, download the
exercise files and let's begin by opening the index.html
file in a text editor.
And then once you have your index file opened up
in a text editor, we can see inside of here we have
a main element, and then inside the main element we
have three anchor links.
Each anchor tag has a class of landmark,
and inside of the anchor tag we have an image that points
to the landmark JPEG file, and then we have a span
that has the name of the landmark, and then in an
emphasis tag, the location of that landmark in the city.
And we have the same markup for each one of the anchor links
and before we continue I'll come over here and preview
this page in a browser so we can see down here we have
our hyperlinks with our span element and the name
of the landmark and the location.
Now to add our hover states, we're going to go into
the CSS file.
So lets go back to the exercise files, lets open up
style.css in our text editor.
And then once we have the css file open, let's scroll
down to the bottom.
The last rule I have here is a.landmark with a greater
than sign which means we're targeting this span
that is an immediate child of the anchor link and
then we're targeting the emphasis tag, this is how
we're getting the italic styling here.
Let's come in here and change the display type from block
to none.
We save our work, go back to our browser, we'll now see
if we can just simply see the titles, we're going to
show the locations on a hover state.
So now back in the CSS we'll hit a few returns
and let's first target the main anchor link and change
the color of the border.
So we'll start with a.landmark:hover hit a space, put
another bracket and we're going to come in here and
change border color, so border dash color.
We're going to set this to pound sign, we'll type in 9C
for red, 90 for green and 53 for blue, then a semicolon.
Look over to the browser and preview this, we'll now
see that we a border color change on all the anchor links.
Now we're going to target the span element inside
of the anchor link, we're going to make the background
a little bit darker here just to make those labels
pop a little bit more.
So again back to the CSS.
Let's come in here and copy the a.landmark:hover
let's paste it down here, then add a space, then
we'll add our greater than sign.
Then span, put in our brackets then we'll set the background
color property to black which is pound sign, and 0 for
red, green and blue then a semicolon.
So now in addition to the border color we also see that
the span element now has a solid black background
when we hover.
So now at this point we want to create a nested
hover state so that if somebody rolls over the span
which is inside of the anchor tag, we'll show the location
as well.
So back to our CSS file, let's come in here and select
this rule, let's copy this paste it on the next line.
Now we'll add the hover pseudo class to the span as well.
Then a space then we're going to target the emphasis tag
inside the span.
Put in our brackets, and then we'll come in here
and set the display type back to block.
Now if you remember from before, before we hid the emphasis
tag, we had the display type here set to block.
So we're going to reset it back to block here, but
only if somebody is hovering over the span element
while they're hovering over the anchor tag.
So with all of these in place, let's save our CSS
let's go back to the browser, we can hover over these,
we see the border change and the background of the span.
And then if I come down here and hover over the span
elements, we'll see that extra information that we put
inside the emphasis tag.
So now that we're able to add even more information to our
hyperlinks, which users can access by simply moving
their cursor over the links.
Now while this technique can create a compelling
user experience, keep in mind that touch devices don't
have hover states so be sure that any extra information
that you supply in a hover state isn't critical
for the navigation of your site.
And so with that I'll conclude this episode, and
as always thanks for watching.