1
00:00:00.06 --> 00:00:02.03
- Hi, this is Chris Converse
and in this episode, we'll

2
00:00:02.03 --> 00:00:04.06
add a little extra
interactivity to our hyperlinks

3
00:00:04.06 --> 00:00:07.09
by adding a second nested hover state.

4
00:00:07.09 --> 00:00:09.04
This technique can add a
little extra information

5
00:00:09.04 --> 00:00:12.00
or interest for people who
are exploring your webpage

6
00:00:12.00 --> 00:00:13.09
with a mouse or a trackpad.

7
00:00:13.09 --> 00:00:15.08
Without changing the
behavior of these links on

8
00:00:15.08 --> 00:00:17.05
touch devices.

9
00:00:17.05 --> 00:00:19.02
So if you'd like to follow
along with me, download the

10
00:00:19.02 --> 00:00:22.08
exercise files and let's begin
by opening the index.html

11
00:00:22.08 --> 00:00:25.08
file in a text editor.

12
00:00:25.08 --> 00:00:27.03
And then once you have
your index file opened up

13
00:00:27.03 --> 00:00:29.05
in a text editor, we can
see inside of here we have

14
00:00:29.05 --> 00:00:32.04
a main element, and then
inside the main element we

15
00:00:32.04 --> 00:00:34.04
have three anchor links.

16
00:00:34.04 --> 00:00:37.00
Each anchor tag has a class of landmark,

17
00:00:37.00 --> 00:00:39.02
and inside of the anchor tag
we have an image that points

18
00:00:39.02 --> 00:00:42.03
to the landmark JPEG file,
and then we have a span

19
00:00:42.03 --> 00:00:45.04
that has the name of the
landmark, and then in an

20
00:00:45.04 --> 00:00:48.06
emphasis tag, the location
of that landmark in the city.

21
00:00:48.06 --> 00:00:51.06
And we have the same markup for
each one of the anchor links

22
00:00:51.06 --> 00:00:54.05
and before we continue I'll
come over here and preview

23
00:00:54.05 --> 00:00:56.06
this page in a browser so
we can see down here we have

24
00:00:56.06 --> 00:00:59.08
our hyperlinks with our
span element and the name

25
00:00:59.08 --> 00:01:02.07
of the landmark and the location.

26
00:01:02.07 --> 00:01:04.04
Now to add our hover states,
we're going to go into

27
00:01:04.04 --> 00:01:05.04
the CSS file.

28
00:01:05.04 --> 00:01:07.05
So lets go back to the
exercise files, lets open up

29
00:01:07.05 --> 00:01:10.02
style.css in our text editor.

30
00:01:10.02 --> 00:01:12.06
And then once we have the
css file open, let's scroll

31
00:01:12.06 --> 00:01:16.03
down to the bottom.

32
00:01:16.03 --> 00:01:19.01
The last rule I have here
is a.landmark with a greater

33
00:01:19.01 --> 00:01:21.05
than sign which means
we're targeting this span

34
00:01:21.05 --> 00:01:23.06
that is an immediate child
of the anchor link and

35
00:01:23.06 --> 00:01:26.02
then we're targeting the
emphasis tag, this is how

36
00:01:26.02 --> 00:01:28.06
we're getting the italic styling here.

37
00:01:28.06 --> 00:01:31.01
Let's come in here and change
the display type from block

38
00:01:31.01 --> 00:01:33.05
to none.

39
00:01:33.05 --> 00:01:35.04
We save our work, go back to
our browser, we'll now see

40
00:01:35.04 --> 00:01:37.04
if we can just simply see
the titles, we're going to

41
00:01:37.04 --> 00:01:41.05
show the locations on a hover state.

42
00:01:41.05 --> 00:01:43.01
So now back in the CSS
we'll hit a few returns

43
00:01:43.01 --> 00:01:45.06
and let's first target the
main anchor link and change

44
00:01:45.06 --> 00:01:49.08
the color of the border.

45
00:01:49.08 --> 00:01:56.00
So we'll start with
a.landmark:hover hit a space, put

46
00:01:56.00 --> 00:01:59.05
another bracket and we're
going to come in here and

47
00:01:59.05 --> 00:02:05.02
change border color, so border dash color.

48
00:02:05.02 --> 00:02:08.09
We're going to set this to
pound sign, we'll type in 9C

49
00:02:08.09 --> 00:02:15.04
for red, 90 for green and 53
for blue, then a semicolon.

50
00:02:15.04 --> 00:02:17.02
Look over to the browser
and preview this, we'll now

51
00:02:17.02 --> 00:02:22.04
see that we a border color
change on all the anchor links.

52
00:02:22.04 --> 00:02:23.06
Now we're going to target
the span element inside

53
00:02:23.06 --> 00:02:25.04
of the anchor link, we're
going to make the background

54
00:02:25.04 --> 00:02:27.02
a little bit darker here
just to make those labels

55
00:02:27.02 --> 00:02:29.06
pop a little bit more.

56
00:02:29.06 --> 00:02:31.08
So again back to the CSS.

57
00:02:31.08 --> 00:02:35.08
Let's come in here and
copy the a.landmark:hover

58
00:02:35.08 --> 00:02:39.01
let's paste it down here,
then add a space, then

59
00:02:39.01 --> 00:02:41.05
we'll add our greater than sign.

60
00:02:41.05 --> 00:02:46.03
Then span, put in our brackets
then we'll set the background

61
00:02:46.03 --> 00:02:49.07
color property to black which
is pound sign, and 0 for

62
00:02:49.07 --> 00:02:52.09
red, green and blue then a semicolon.

63
00:02:52.09 --> 00:02:55.04
So now in addition to the
border color we also see that

64
00:02:55.04 --> 00:02:57.07
the span element now has
a solid black background

65
00:02:57.07 --> 00:03:00.00
when we hover.

66
00:03:00.00 --> 00:03:01.06
So now at this point we
want to create a nested

67
00:03:01.06 --> 00:03:03.03
hover state so that if
somebody rolls over the span

68
00:03:03.03 --> 00:03:06.03
which is inside of the anchor
tag, we'll show the location

69
00:03:06.03 --> 00:03:08.02
as well.

70
00:03:08.02 --> 00:03:10.04
So back to our CSS file,
let's come in here and select

71
00:03:10.04 --> 00:03:14.02
this rule, let's copy this
paste it on the next line.

72
00:03:14.02 --> 00:03:20.01
Now we'll add the hover pseudo
class to the span as well.

73
00:03:20.01 --> 00:03:22.01
Then a space then we're going
to target the emphasis tag

74
00:03:22.01 --> 00:03:24.08
inside the span.

75
00:03:24.08 --> 00:03:27.02
Put in our brackets, and
then we'll come in here

76
00:03:27.02 --> 00:03:31.00
and set the display type back to block.

77
00:03:31.00 --> 00:03:33.09
Now if you remember from before,
before we hid the emphasis

78
00:03:33.09 --> 00:03:37.01
tag, we had the display
type here set to block.

79
00:03:37.01 --> 00:03:39.04
So we're going to reset
it back to block here, but

80
00:03:39.04 --> 00:03:41.07
only if somebody is hovering
over the span element

81
00:03:41.07 --> 00:03:45.04
while they're hovering
over the anchor tag.

82
00:03:45.04 --> 00:03:47.00
So with all of these in
place, let's save our CSS

83
00:03:47.00 --> 00:03:50.02
let's go back to the browser,
we can hover over these,

84
00:03:50.02 --> 00:03:52.05
we see the border change and
the background of the span.

85
00:03:52.05 --> 00:03:55.00
And then if I come down
here and hover over the span

86
00:03:55.00 --> 00:03:56.09
elements, we'll see that
extra information that we put

87
00:03:56.09 --> 00:03:59.03
inside the emphasis tag.

88
00:03:59.03 --> 00:04:01.04
So now that we're able to add
even more information to our

89
00:04:01.04 --> 00:04:04.02
hyperlinks, which users
can access by simply moving

90
00:04:04.02 --> 00:04:06.07
their cursor over the links.

91
00:04:06.07 --> 00:04:08.02
Now while this technique
can create a compelling

92
00:04:08.02 --> 00:04:10.04
user experience, keep in
mind that touch devices don't

93
00:04:10.04 --> 00:04:13.08
have hover states so be sure
that any extra information

94
00:04:13.08 --> 00:04:16.05
that you supply in a
hover state isn't critical

95
00:04:16.05 --> 00:04:18.07
for the navigation of your site.

96
00:04:18.07 --> 00:04:20.08
And so with that I'll
conclude this episode, and

97
00:04:20.08 --> 00:04:23.03
as always thanks for watching.