Mouse Hover

3 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€93.84
List Price:  €131.38
You save:  €37.54
£80.95
List Price:  £113.34
You save:  £32.38
CA$137.04
List Price:  CA$191.86
You save:  CA$54.82
A$154.99
List Price:  A$216.99
You save:  A$62
S$136.27
List Price:  S$190.79
You save:  S$54.51
HK$783.50
List Price:  HK$1,096.94
You save:  HK$313.43
CHF 91.19
List Price:  CHF 127.67
You save:  CHF 36.48
NOK kr1,101.37
List Price:  NOK kr1,541.96
You save:  NOK kr440.59
DKK kr700.13
List Price:  DKK kr980.21
You save:  DKK kr280.08
NZ$169.21
List Price:  NZ$236.90
You save:  NZ$67.69
د.إ367.23
List Price:  د.إ514.14
You save:  د.إ146.90
৳10,965.37
List Price:  ৳15,351.96
You save:  ৳4,386.58
₹8,334.23
List Price:  ₹11,668.26
You save:  ₹3,334.02
RM477.95
List Price:  RM669.15
You save:  RM191.20
₦125,683.43
List Price:  ₦175,961.83
You save:  ₦50,278.40
₨27,806
List Price:  ₨38,929.52
You save:  ₨11,123.51
฿3,703.32
List Price:  ฿5,184.80
You save:  ฿1,481.48
₺3,259.92
List Price:  ₺4,564.01
You save:  ₺1,304.09
B$516.59
List Price:  B$723.25
You save:  B$206.66
R1,923.67
List Price:  R2,693.22
You save:  R769.54
Лв183.31
List Price:  Лв256.64
You save:  Лв73.33
₩137,775.97
List Price:  ₩192,891.88
You save:  ₩55,115.90
₪378.18
List Price:  ₪529.46
You save:  ₪151.28
₱5,754.62
List Price:  ₱8,056.70
You save:  ₱2,302.07
¥15,478.45
List Price:  ¥21,670.45
You save:  ¥6,192
MX$1,711.89
List Price:  MX$2,396.72
You save:  MX$684.82
QR364.36
List Price:  QR510.13
You save:  QR145.76
P1,383.88
List Price:  P1,937.49
You save:  P553.61
KSh13,448.65
List Price:  KSh18,828.65
You save:  KSh5,380
E£4,807.48
List Price:  E£6,730.67
You save:  E£1,923.18
ብር5,687.89
List Price:  ብር7,963.28
You save:  ብር2,275.38
Kz83,485.81
List Price:  Kz116,883.48
You save:  Kz33,397.66
CLP$95,253.47
List Price:  CLP$133,358.67
You save:  CLP$38,105.20
CN¥724.60
List Price:  CN¥1,014.47
You save:  CN¥289.87
RD$5,894.01
List Price:  RD$8,251.85
You save:  RD$2,357.84
DA13,445.45
List Price:  DA18,824.17
You save:  DA5,378.72
FJ$227.71
List Price:  FJ$318.80
You save:  FJ$91.09
Q777.29
List Price:  Q1,088.24
You save:  Q310.94
GY$20,903.54
List Price:  GY$29,265.80
You save:  GY$8,362.25
ISK kr14,104.58
List Price:  ISK kr19,746.98
You save:  ISK kr5,642.40
DH1,013.18
List Price:  DH1,418.50
You save:  DH405.31
L1,782.83
List Price:  L2,496.04
You save:  L713.20
ден5,776.11
List Price:  ден8,086.79
You save:  ден2,310.67
MOP$806.39
List Price:  MOP$1,128.98
You save:  MOP$322.58
N$1,907.39
List Price:  N$2,670.43
You save:  N$763.03
C$3,677.32
List Price:  C$5,148.40
You save:  C$1,471.07
रु13,326.11
List Price:  रु18,657.10
You save:  रु5,330.98
S/368.16
List Price:  S/515.44
You save:  S/147.28
K379.71
List Price:  K531.61
You save:  K151.90
SAR375.04
List Price:  SAR525.07
You save:  SAR150.03
ZK2,580.25
List Price:  ZK3,612.45
You save:  ZK1,032.20
L466.96
List Price:  L653.76
You save:  L186.80
Kč2,370.96
List Price:  Kč3,319.44
You save:  Kč948.48
Ft36,978.60
List Price:  Ft51,771.52
You save:  Ft14,792.91
SEK kr1,088.71
List Price:  SEK kr1,524.24
You save:  SEK kr435.53
ARS$87,217.91
List Price:  ARS$122,108.57
You save:  ARS$34,890.65
Bs692.87
List Price:  Bs970.05
You save:  Bs277.17
COP$390,680.46
List Price:  COP$546,968.27
You save:  COP$156,287.81
₡50,009.58
List Price:  ₡70,015.41
You save:  ₡20,005.83
L2,466.51
List Price:  L3,453.22
You save:  L986.70
₲740,348.57
List Price:  ₲1,036,517.61
You save:  ₲296,169.04
$U3,852.35
List Price:  $U5,393.45
You save:  $U1,541.09
zł405.43
List Price:  zł567.62
You save:  zł162.18
Already have an account? Log In

Transcript

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.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.