Day 22 of #javascript30 makes a link hover highlight that follows you around on the page. I try to understand the difference between mouseover and mouseenter.
mouseenter vs mouseover
Using transition and translate in CSS we can make the hover look like it is following you. We listen for the mouseenter event and then the highlight is moved with CSS' translate. I didn't know the mouseenter event, so I tried to read up on the difference between that and mouseover. The docs are really not crystal clear, so I must say that I didn't get all that much wiser from that. I found this demo on JSFiddle:
That helps a little, but I think the choice between the events depends a lot on the DOM you are working with. So maybe test with both and see which one gives you the most relevant amount of events. No reason to slam the browser because you are not using the optimal event.
Element.getBoundingClientRect()
Here is a method I would have like to have known about in the past. I've found myself working with position and size a lot and never really knowing which properties to use. getBoundingClientRect() gives you a DOMRect object that has height, width, top, and left. There are a couple of other properties, but be careful because not all of them are available in all browsers.