Day 22 Challenge with a highlighted menu item

Visit Stripe's website and navigate to the menu links along the top of the page. As you hover, the dropdown transforms to different sizes as you move from one menu item to the next. This challenge tackles the first part, which is to highlight and resize each menu item. A later challenge will cover the dropdown portion.

What Did I Learn?

Element.getBoundingClientRect() tells us where on the page the element lives. This was used to calculate and move the highlighted box over to the user's cursor when it was hovered over a link.

Interested in participating in #JavaScript30?

Register here and learn at your own speed.