1
00:00:05,260 --> 00:00:08,190
I so let's take a look at Dooney hover effect using j.

2
00:00:08,210 --> 00:00:13,140
We're not too far from the everything else we've done so far but a little bit different here so go ahead

3
00:00:13,150 --> 00:00:14,360
and break it down for you.

4
00:00:15,760 --> 00:00:17,710
Start out the same way we have with everything else.

5
00:00:17,710 --> 00:00:21,790
We start with our document was the one that's ready creative function here and within that function

6
00:00:21,820 --> 00:00:28,360
we are going to as always start with our dollar sign and open up a pair of parentheses and within their

7
00:00:28,360 --> 00:00:33,410
we want to target a class this time just to kind of change it up a little bit here.

8
00:00:33,800 --> 00:00:38,080
Now say text copy and no make up whatever you want there.

9
00:00:38,200 --> 00:00:43,870
It's just Ixia says class will say text copy and then we're going to do it on a higher state.

10
00:00:43,960 --> 00:00:47,280
So don't hover over hover right there.

11
00:00:47,420 --> 00:00:57,550
We're going to target now something that we're going to create a variable for and call this one highlight

12
00:00:58,900 --> 00:01:05,810
copy rights will create this kind of object here this highlights copy and then go ahead and close it

13
00:01:05,830 --> 00:01:10,870
out the semi-colon like we normally do and then create a function now that's going to make this whole

14
00:01:10,870 --> 00:01:16,470
thing work and it will say and this function does highlight copying something it copy and paste.

15
00:01:16,640 --> 00:01:19,340
I like copy open and closed.

16
00:01:19,660 --> 00:01:23,650
Open and closed crude brackets and then that function there of highlight copy what are you going to

17
00:01:23,650 --> 00:01:23,970
do.

18
00:01:23,980 --> 00:01:28,860
We're going to do something a little bit different here and use the dollar sign and we're going to pare

19
00:01:28,880 --> 00:01:33,600
parentheses instead of putting quotes going to put quotes as time which I say this.

20
00:01:33,640 --> 00:01:41,650
We're going to target this very specific thing and we will do toggle class.

21
00:01:41,710 --> 00:01:43,040
Now that is something specific to J.

22
00:01:43,040 --> 00:01:49,810
Crew here and they just toggle class and we're going to open and close a set of parentheses you know

23
00:01:49,890 --> 00:01:50,770
and set a

24
00:01:53,980 --> 00:01:56,950
quote marks there and we will say

25
00:02:00,220 --> 00:02:07,550
oh I know what that class is or that is a Class C we are going to create with an R C S s down here where

26
00:02:07,580 --> 00:02:09,870
or say the Tuggle to this class.

27
00:02:09,870 --> 00:02:12,800
Now toggled to change to it use it.

28
00:02:12,830 --> 00:02:19,610
Basically when I don't close it out some I call and they're very simple I think and remove some of the

29
00:02:19,870 --> 00:02:22,650
room here so you can see everything all together.

30
00:02:22,960 --> 00:02:23,870
Delete that.

31
00:02:24,160 --> 00:02:30,370
So again Dyken starts when it's ready go ahead and target does anything with this class within the body

32
00:02:30,370 --> 00:02:31,400
of the document here.

33
00:02:31,660 --> 00:02:36,630
And on hover where I do this highlight copy secret of the function of heilig copy.

34
00:02:36,760 --> 00:02:44,060
And we said whatever that is toggled to the class that says this class of highlight something and come

35
00:02:44,430 --> 00:02:51,510
down here and get it a text box this time that was the old class and they all say I like it open and

36
00:02:51,510 --> 00:02:56,540
close that bad boy and make sure this is a class and not an idea because we said this is a class of

37
00:02:56,570 --> 00:02:57,060
year.

38
00:02:57,210 --> 00:02:57,840
So.

39
00:02:57,900 --> 00:03:04,450
And do something going to court there was a text shadow.

40
00:03:04,470 --> 00:03:09,090
So kind of create a little drop show for the text here and some of the highlights or Mausers and won't

41
00:03:09,120 --> 00:03:10,010
say Kallen

42
00:03:12,510 --> 00:03:22,980
one pixel to the bar one pixel to right and we give with a shadow of just a real light gray c c c c

43
00:03:22,980 --> 00:03:28,360
c c it's nice like gray when there got six circuit court.

44
00:03:28,560 --> 00:03:30,920
So highlight a tech shadow here.

45
00:03:31,020 --> 00:03:36,710
I've got this idea here that was from a previous area that still kind of works here because we're not

46
00:03:36,990 --> 00:03:43,080
going to worry about this but we do need to get this paragraph here something very specific so I could

47
00:03:43,080 --> 00:03:45,200
say this paragraph.

48
00:03:45,370 --> 00:03:47,550
I always open the closes the wrong area.

49
00:03:47,670 --> 00:03:48,480
I cut that out.

50
00:03:48,480 --> 00:03:53,510
In fact I can do this just for the first kind of like sentence area here.

51
00:03:53,520 --> 00:03:55,840
So it just has made a difference.

52
00:03:56,250 --> 00:04:02,970
So we open that paragraph tag will open new paragraph Ted here will cut that guy out and we'll close

53
00:04:02,970 --> 00:04:03,900
this one out.

54
00:04:03,900 --> 00:04:07,230
So again to cache the difference here I'm going to add just this one class

55
00:04:09,660 --> 00:04:13,980
of what I create highlight right there.

56
00:04:14,230 --> 00:04:19,980
So the class of highlight now is I can actually apply that to it just yet.

57
00:04:19,980 --> 00:04:24,190
But that's going to do is only apply it when I hover over it.

58
00:04:24,360 --> 00:04:36,900
If it works right and saved my document and then come back and see my document as cover see that in

59
00:04:36,920 --> 00:04:42,840
my files there and then come back and if I hover dry that onto a browser window here.

60
00:04:42,850 --> 00:04:43,510
So now

61
00:04:48,190 --> 00:04:49,300
and of course that didn't work.

62
00:04:49,330 --> 00:04:55,630
Looks so good that I do and actually plan a class down there so that should be is it should be only

63
00:04:55,630 --> 00:05:03,830
when you say text copy nights and put that right there and say that's and come back and hit refresh.

64
00:05:03,940 --> 00:05:05,840
All right so now that drop should have went away.

65
00:05:05,940 --> 00:05:10,330
Bet the mouse over you can can see that will drop shadow going on over there.

66
00:05:10,530 --> 00:05:12,900
You know let's make that a little bit different.

67
00:05:13,000 --> 00:05:21,620
The texture was kind of cool but just for this case background.

68
00:05:23,360 --> 00:05:28,040
Let's make that a background read when you mouse over it instead save.

69
00:05:28,050 --> 00:05:33,010
Come on back hit refresh 1970s bottom paragraph because they do not target the right class.

70
00:05:33,190 --> 00:05:37,780
But this one I did target with the query class and as a mouse over you you can see that it highlights

71
00:05:37,780 --> 00:05:42,450
there some really cool things you can do with a mouse over using the query.

72
00:05:42,530 --> 00:05:44,480
There is simple code here.

73
00:05:44,680 --> 00:05:48,390
Go through this again if you don't understand as it should be very simple.

74
00:05:48,400 --> 00:05:50,750
We're just targeting this highlight class.

75
00:05:50,830 --> 00:05:56,530
Whenever somebody hovers over it and this class is applied to.