1
00:00:00,000 --> 00:00:03,180
There is a way to register an event when you put

2
00:00:03,180 --> 00:00:06,380
your mouse over something and when you move it off of something.

3
00:00:06,375 --> 00:00:09,225
And for this, let's go ahead and write a little bit of CSS.

4
00:00:09,225 --> 00:00:10,625
So let's add some styling here,

5
00:00:10,620 --> 00:00:13,130
and let's create a box.

6
00:00:13,125 --> 00:00:18,245
And it's going to have a width of 200 pixels, height, 200 pixels.

7
00:00:18,240 --> 00:00:21,690
Background color is going to be black.

8
00:00:21,690 --> 00:00:24,350
And let's put in the middle of our page, let's do margin,

9
00:00:24,345 --> 00:00:29,385
50% or 50 pixels top and bottom and right in the middle of the page.

10
00:00:29,385 --> 00:00:31,505
And so now we need to go and create a box and,

11
00:00:31,500 --> 00:00:34,140
and look at this CSS.

12
00:00:34,140 --> 00:00:36,730
This is an ID for a box selector.

13
00:00:36,730 --> 00:00:38,740
Box.

14
00:00:38,735 --> 00:00:41,105
I can m0 to abbreviate that.

15
00:00:41,105 --> 00:00:42,965
So I'm not gonna put any text in there.

16
00:00:42,965 --> 00:00:44,975
And then to select that box,

17
00:00:44,975 --> 00:00:47,605
all I have to do is write the exact same thing.

18
00:00:47,600 --> 00:00:49,670
And so now we're writing the same thing across

19
00:00:49,670 --> 00:00:52,310
basically three different scripting languages.

20
00:00:52,310 --> 00:00:55,140
We've got HTML, CSS, and JavaScript.

21
00:00:55,144 --> 00:01:00,984
So now we can say dot box on mouse enter.

22
00:01:00,980 --> 00:01:04,990
And what do we do when we put the mouse inside of this box,

23
00:01:04,985 --> 00:01:10,555
that's console dot log, you entered.

24
00:01:10,550 --> 00:01:19,210
And say your mouse is a hovering over this box.

25
00:01:19,205 --> 00:01:21,835
And so when we refresh the page, we have this black box.

26
00:01:21,830 --> 00:01:23,300
And every time I put my mouse over it,

27
00:01:23,300 --> 00:01:25,870
it says your mouse is hovering over this box.

28
00:01:25,865 --> 00:01:31,495
And so it only does it once while I'm on top of this box.

29
00:01:31,490 --> 00:01:33,290
And when I move out, nothing happens.

30
00:01:33,290 --> 00:01:34,750
When I move in, happens again.

31
00:01:34,745 --> 00:01:39,215
Now if you register when you move your mouse out, very, very simple.

32
00:01:40,660 --> 00:01:46,900
We can now chain these together and we can say on mouse enter,

33
00:01:46,895 --> 00:01:51,495
we can also say dot on mouse leave.

34
00:01:51,499 --> 00:01:54,029
Let's write a function here.

35
00:01:54,520 --> 00:01:58,830
And we can say console dot warn.

36
00:01:58,900 --> 00:02:02,700
You left the box.

37
00:02:04,230 --> 00:02:07,540
And so all we're doing here is mouse enter and

38
00:02:07,540 --> 00:02:10,030
mostly of now as a quick little recap from last lesson,

39
00:02:10,030 --> 00:02:12,100
cuz the last lesson was pretty intense.

40
00:02:12,100 --> 00:02:15,260
All we're doing here is some sort of selector,

41
00:02:15,720 --> 00:02:19,600
dot on the event name.

42
00:02:19,600 --> 00:02:24,480
And then a function, and that function will do whatever we wanted to do in here.

43
00:02:24,475 --> 00:02:27,465
This is the event listener syntax.

44
00:02:27,460 --> 00:02:28,620
That's all it is.

45
00:02:28,615 --> 00:02:30,255
So just as a quick recap,

46
00:02:30,250 --> 00:02:33,130
we have a selector because everything is based on selectors in jQuery.

47
00:02:33,130 --> 00:02:37,210
Well, almost everything on to register an event,

48
00:02:37,210 --> 00:02:38,610
whatever that event name is.

49
00:02:38,605 --> 00:02:41,185
In this lesson, we're using mouse enter and mouse leave,

50
00:02:41,185 --> 00:02:46,705
and then do a function whenever that event is triggered.

51
00:02:47,670 --> 00:02:52,930
Okay, let's save that and refresh the page.

52
00:02:52,930 --> 00:02:55,020
Ok, nothing is happening and move my mouse in.

53
00:02:55,015 --> 00:02:56,755
Your mouse is hovering over the box.

54
00:02:56,755 --> 00:02:58,885
It says you left the box area.

55
00:02:58,885 --> 00:03:00,735
Every time we go in and out,

56
00:03:00,730 --> 00:03:02,730
in and out, in and out.

57
00:03:02,725 --> 00:03:04,945
Now I'm going to be completely honest here.

58
00:03:04,945 --> 00:03:07,465
This was super popular a number of years ago,

59
00:03:07,465 --> 00:03:09,795
but people don't really use hover events anymore.

60
00:03:09,790 --> 00:03:15,280
We try to use hover events in peer CSS if possible.

61
00:03:15,280 --> 00:03:17,520
Sometimes that just isn't possible.

62
00:03:17,515 --> 00:03:23,905
So we can use jQuery or we can use vanilla JavaScript as well to make this happen.

63
00:03:23,905 --> 00:03:28,285
But typically we try to stick with CSS to make

64
00:03:28,285 --> 00:03:30,775
any sort of event happened when you

65
00:03:30,770 --> 00:03:33,520
move your mouse over something or move your mouse off of something.

66
00:03:33,515 --> 00:03:40,145
And in CSS, it's as simple as saying box hover, and then it does a thing.

67
00:03:40,145 --> 00:03:41,695
And when you move your box,

68
00:03:41,690 --> 00:03:45,380
or when you move your mouse off of this box and it's no longer hovering,

69
00:03:45,380 --> 00:03:47,590
it goes back to its default.

70
00:03:47,585 --> 00:03:49,945
So that's all it is then that's why we prefer CSS.

71
00:03:49,940 --> 00:03:52,220
But again, sometimes that's not possible.

72
00:03:52,220 --> 00:03:54,410
And sometimes we need to write a little bit of JavaScript,

73
00:03:54,410 --> 00:03:57,170
a little bit of jQuery to make that possible.

74
00:03:57,170 --> 00:03:58,670
Go ahead and give this a shot.

75
00:03:58,670 --> 00:03:59,840
I want you to do two things here.

76
00:03:59,840 --> 00:04:04,880
I want you to select some sort of element and register a mouse enter event.

77
00:04:04,880 --> 00:04:06,670
And just console login.

78
00:04:06,665 --> 00:04:08,245
We don't have to do anything fancy yet.

79
00:04:08,240 --> 00:04:10,120
We'll get into the fanciness a little bit later,

80
00:04:10,115 --> 00:04:11,825
but just come to log something.

81
00:04:11,825 --> 00:04:17,185
And then when you mouse leave console log or console worn something else.

82
00:04:17,180 --> 00:04:20,780
And then part two is I want you to chain these together.

83
00:04:20,780 --> 00:04:25,420
So currently, we know that it can look like this.

84
00:04:25,415 --> 00:04:31,205
Doo-doo-doo-doo rooms in a slack that bump that inwards.

85
00:04:31,205 --> 00:04:34,315
So this works, this will work perfectly fine.

86
00:04:34,310 --> 00:04:40,050
But I want you to chain them together to make a little nicer jQuery code.

87
00:04:40,180 --> 00:04:42,740
It's also a little bit more performance.

88
00:04:42,740 --> 00:04:46,340
It means your browser doesn't need to look up this particular elements or

89
00:04:46,340 --> 00:04:48,830
this particular selector more than once and can

90
00:04:48,830 --> 00:04:51,940
do it just once and use it over and over again.

91
00:04:51,935 --> 00:04:54,005
Once you've done that in the next lesson,

92
00:04:54,005 --> 00:04:56,845
we are going to be talking about the key up event listener.

93
00:04:56,840 --> 00:05:02,210
So what happens when you type in some sort of input elements?

94
00:05:02,210 --> 00:05:03,470
You type something in there.

95
00:05:03,470 --> 00:05:05,120
How do we get that value out of there?

96
00:05:05,120 --> 00:05:08,360
What happens every time you press a key on your keyboard?

97
00:05:08,360 --> 00:05:11,430
We're gonna talk about that in the next lesson.