Mouse enters element
│
▼
┌─────────────┐
│ element │
│ (e.g. div) │
└─────────────┘
│
mouseenter event fires
│
▼
hover() first function runs
│
▼
(apply hover effect, e.g., color change)
│
│
Mouse leaves element
│
▼
mouseleave event fires
│
▼
hover() second function runs
│
▼
(revert hover effect, e.g., original color)
Quick Reference Table
| Method |
When it fires |
Purpose |
mouseenter |
As soon as mouse enters element |
Apply effect on hover start |
mouseleave |
As soon as mouse leaves element |
Undo effect on hover end |
hover(fn1, fn2) |
Combines mouseenter + mouseleave |
Shortcut for hover effects |
