There is a way to register an event when you put
your mouse over something and when you move it off of something.
And for this, let's go ahead and write a little bit of CSS.
So let's add some styling here,
and let's create a box.
And it's going to have a width of 200 pixels, height, 200 pixels.
Background color is going to be black.
And let's put in the middle of our page, let's do margin,
50% or 50 pixels top and bottom and right in the middle of the page.
And so now we need to go and create a box and,
and look at this CSS.
This is an ID for a box selector.
Box.
I can m0 to abbreviate that.
So I'm not gonna put any text in there.
And then to select that box,
all I have to do is write the exact same thing.
And so now we're writing the same thing across
basically three different scripting languages.
We've got HTML, CSS, and JavaScript.
So now we can say dot box on mouse enter.
And what do we do when we put the mouse inside of this box,
that's console dot log, you entered.
And say your mouse is a hovering over this box.
And so when we refresh the page, we have this black box.
And every time I put my mouse over it,
it says your mouse is hovering over this box.
And so it only does it once while I'm on top of this box.
And when I move out, nothing happens.
When I move in, happens again.
Now if you register when you move your mouse out, very, very simple.
We can now chain these together and we can say on mouse enter,
we can also say dot on mouse leave.
Let's write a function here.
And we can say console dot warn.
You left the box.
And so all we're doing here is mouse enter and
mostly of now as a quick little recap from last lesson,
cuz the last lesson was pretty intense.
All we're doing here is some sort of selector,
dot on the event name.
And then a function, and that function will do whatever we wanted to do in here.
This is the event listener syntax.
That's all it is.
So just as a quick recap,
we have a selector because everything is based on selectors in jQuery.
Well, almost everything on to register an event,
whatever that event name is.
In this lesson, we're using mouse enter and mouse leave,
and then do a function whenever that event is triggered.
Okay, let's save that and refresh the page.
Ok, nothing is happening and move my mouse in.
Your mouse is hovering over the box.
It says you left the box area.
Every time we go in and out,
in and out, in and out.
Now I'm going to be completely honest here.
This was super popular a number of years ago,
but people don't really use hover events anymore.
We try to use hover events in peer CSS if possible.
Sometimes that just isn't possible.
So we can use jQuery or we can use vanilla JavaScript as well to make this happen.
But typically we try to stick with CSS to make
any sort of event happened when you
move your mouse over something or move your mouse off of something.
And in CSS, it's as simple as saying box hover, and then it does a thing.
And when you move your box,
or when you move your mouse off of this box and it's no longer hovering,
it goes back to its default.
So that's all it is then that's why we prefer CSS.
But again, sometimes that's not possible.
And sometimes we need to write a little bit of JavaScript,
a little bit of jQuery to make that possible.
Go ahead and give this a shot.
I want you to do two things here.
I want you to select some sort of element and register a mouse enter event.
And just console login.
We don't have to do anything fancy yet.
We'll get into the fanciness a little bit later,
but just come to log something.
And then when you mouse leave console log or console worn something else.
And then part two is I want you to chain these together.
So currently, we know that it can look like this.
Doo-doo-doo-doo rooms in a slack that bump that inwards.
So this works, this will work perfectly fine.
But I want you to chain them together to make a little nicer jQuery code.
It's also a little bit more performance.
It means your browser doesn't need to look up this particular elements or
this particular selector more than once and can
do it just once and use it over and over again.
Once you've done that in the next lesson,
we are going to be talking about the key up event listener.
So what happens when you type in some sort of input elements?
You type something in there.
How do we get that value out of there?
What happens every time you press a key on your keyboard?
We're gonna talk about that in the next lesson.