Table of Contents
A mainstay of many custom user experiences is a mouse cursor that either adds to or fully replaces the default mouse cursor. Take a look at the following example and move your mouse over the yellow box:
As you move your mouse cursor over the yellow box, you'll see a purple octopus track the mouse cursor with a slight delay. In this coding exercise, we'll look at how to re-create this.
We want to make this a fun learning activity. If you are stuck and need help, please ask on the forums. Please explain your problem in detail and one of the many helpful forum members will help you out.
Once you have completed this exercise, you have earned the tremendous bragworthy privilege of adding the following badge to your collection:
To claim it, head to the forums and respond in the Custom Mouse Cursor topic. Be sure to include a link to your solution or insert a copy of your HTML/CSS/JS in the body of the message. Once you have created your topic, Kirupa will give you a virtual high-five and ensure this badge is added to your list of assigned badges.
As with all coding exercises, there are a billion ways to solve them. If you want to see one way of solving this, check out Kirupa's video and article below:
Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!