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.

Onwards!

Getting Your Badge

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.

One Possible Solution

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!