DEV Community


Discussion on: A shiny-on-hover effect that follows your mouse (CSS) ✨

biowaffeln profile image
Mark Kvetny

That's a really cool effect, thanks for the article! A note on the React code, you can simply bind the event handler with the onMouseMove prop, which saves you some of the boilerplate:

  const onMouseMove = (e) => {
    const btn = e.currentTarget
    const { x, y } = btn.getBoundingClientRect()"--x", e.clientX - x)"--y", e.clientY - y)

  return (
    <button className="shiny" onMouseMove={onMouseMove}>
      very cool button
Enter fullscreen mode Exit fullscreen mode

(The Svelte should look very similar to the one above.)

bholmesdev profile image
Ben Holmes Author

Ah, right you are! I somehow spaced on the fact that currentTarget solves the problem 🤦‍♂️

I'll update these snippets!