Hello, in this jQuery video, I'm going to show you the hover event hover event is essentially just a combination of the mouse enter and the mouse leave event into one sort of, you know, code block. If you don't know how to do mouse enter mouse leave or you're just unsure about it, I'll recommend taking a look at those videos and coming back. Okay, so what we're going to do is essentially replace this with a hover event for them. Again, you can use whatever fancy selector you want. That is the same. It's this little part that does the magic afterwards.
So I'll leave it here for now. And I'll comment it out afterwards. Actually, I can get rid of this and even those that phone get rid of these banners. Well, from there, okay, so this is more he does. When you hover over it, it changes the color and he changes it back again, simple example. But the principle is the same.
You could mute any JavaScript or jQuery code code between these parentheses right here. So to do this, you have a selector as you normally would. So whatever you want to select the set of Don't mess, enter automatically. It's just hover, not mess almost pop up, and you open bracket function. So so far, it's looking pretty similar for the most part it is. And I will put semicolon at the end here is where you put the actual mouse enter code.
So if I copy that, and we'll have this and what I'm going to do is actually change this to yellow. So just something slightly different. Just so you can see that when we come to so clearly, the new code has been run. And to actually add the equivalent mouse leave what you do Before this bracket, and after the curly braces, you put a comma, then put function. So we basically have two functions. That's what the hava method takes two functions.
And the two functions. The first one is the math center. Second one is the messy, and it could just be functions that are code directly. And no assumptions could be called in here can do whatever you want. And now we just need to put the curly braces here is where you put the most leave code. And I'll grab this now, I'll call this time.
Save that reload. Your Yeah. Okay. As you can see, it works. essentially the same way with the yellow probably isn't the best color, but you can still see that the color is changing, so that the hover event is just a comment. nation of the max and automatically what we're thinking, why would you just not use the mouse hover all the time because, you know, technically less code because you don't have to do a selector all the time.
Main reason is, you might actually only want a mouse enter or you might want in a different location, you know, and another few other reasons. So, depending on your scenario is something simple. I definitely definitely know you want both, then I would say just use a hammer. That's it for this video. This just covered the hover event. If you have any questions, feel free to shoot me a message.
And usual I look forward to seeing you in the next tutorial.