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
€95.97
List Price:  €134.37
You save:  €38.39
£79.79
List Price:  £111.71
You save:  £31.92
CA$140.31
List Price:  CA$196.44
You save:  CA$56.13
A$153.75
List Price:  A$215.26
You save:  A$61.51
S$134.64
List Price:  S$188.51
You save:  S$53.86
HK$778.36
List Price:  HK$1,089.74
You save:  HK$311.37
CHF 89.34
List Price:  CHF 125.09
You save:  CHF 35.74
NOK kr1,107.14
List Price:  NOK kr1,550.05
You save:  NOK kr442.90
DKK kr715.75
List Price:  DKK kr1,002.09
You save:  DKK kr286.33
NZ$171.37
List Price:  NZ$239.93
You save:  NZ$68.55
د.إ367.26
List Price:  د.إ514.18
You save:  د.إ146.92
৳11,945.63
List Price:  ৳16,724.36
You save:  ৳4,778.73
₹8,442.99
List Price:  ₹11,820.52
You save:  ₹3,377.53
RM446.75
List Price:  RM625.47
You save:  RM178.72
₦169,271.38
List Price:  ₦236,986.70
You save:  ₦67,715.32
₨27,777.22
List Price:  ₨38,889.22
You save:  ₨11,112
฿3,446.26
List Price:  ฿4,824.91
You save:  ฿1,378.64
₺3,454.90
List Price:  ₺4,837
You save:  ₺1,382.10
B$580.04
List Price:  B$812.08
You save:  B$232.04
R1,815.38
List Price:  R2,541.61
You save:  R726.22
Лв187.66
List Price:  Лв262.73
You save:  Лв75.07
₩140,436.95
List Price:  ₩196,617.35
You save:  ₩56,180.40
₪371.46
List Price:  ₪520.07
You save:  ₪148.60
₱5,893.31
List Price:  ₱8,250.87
You save:  ₱2,357.56
¥15,475.45
List Price:  ¥21,666.25
You save:  ¥6,190.80
MX$2,042.64
List Price:  MX$2,859.78
You save:  MX$817.14
QR364.56
List Price:  QR510.41
You save:  QR145.84
P1,367.06
List Price:  P1,913.94
You save:  P546.88
KSh12,945.58
List Price:  KSh18,124.33
You save:  KSh5,178.75
E£4,964.52
List Price:  E£6,950.52
You save:  E£1,986
ብር12,237.67
List Price:  ብር17,133.23
You save:  ብር4,895.55
Kz91,290.87
List Price:  Kz127,810.87
You save:  Kz36,520
CLP$97,782.75
List Price:  CLP$136,899.76
You save:  CLP$39,117.01
CN¥724.22
List Price:  CN¥1,013.94
You save:  CN¥289.72
RD$6,024.63
List Price:  RD$8,434.73
You save:  RD$2,410.09
DA13,426.15
List Price:  DA18,797.15
You save:  DA5,371
FJ$227.57
List Price:  FJ$318.61
You save:  FJ$91.03
Q771.64
List Price:  Q1,080.33
You save:  Q308.69
GY$20,913.50
List Price:  GY$29,279.73
You save:  GY$8,366.23
ISK kr13,962.80
List Price:  ISK kr19,548.48
You save:  ISK kr5,585.67
DH1,005.63
List Price:  DH1,407.93
You save:  DH402.29
L1,821.98
List Price:  L2,550.85
You save:  L728.86
ден5,904.20
List Price:  ден8,266.12
You save:  ден2,361.91
MOP$801.48
List Price:  MOP$1,122.11
You save:  MOP$320.62
N$1,812.81
List Price:  N$2,538.01
You save:  N$725.20
C$3,678.31
List Price:  C$5,149.78
You save:  C$1,471.47
रु13,500.25
List Price:  रु18,900.90
You save:  रु5,400.64
S/379.05
List Price:  S/530.69
You save:  S/151.63
K402.47
List Price:  K563.48
You save:  K161
SAR375.40
List Price:  SAR525.58
You save:  SAR150.17
ZK2,764.29
List Price:  ZK3,870.12
You save:  ZK1,105.82
L477.77
List Price:  L668.90
You save:  L191.12
Kč2,432.37
List Price:  Kč3,405.42
You save:  Kč973.04
Ft39,496.05
List Price:  Ft55,296.05
You save:  Ft15,800
SEK kr1,103.50
List Price:  SEK kr1,544.95
You save:  SEK kr441.44
ARS$100,363.46
List Price:  ARS$140,512.86
You save:  ARS$40,149.40
Bs690.75
List Price:  Bs967.07
You save:  Bs276.32
COP$438,931.09
List Price:  COP$614,521.09
You save:  COP$175,589.99
₡50,918.63
List Price:  ₡71,288.12
You save:  ₡20,369.49
L2,526.16
List Price:  L3,536.73
You save:  L1,010.56
₲780,388.98
List Price:  ₲1,092,575.79
You save:  ₲312,186.81
$U4,261.82
List Price:  $U5,966.72
You save:  $U1,704.90
zł416.31
List Price:  zł582.85
You save:  zł166.54
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.