Custom cursors with CSS and jQuery

In this tutorial I will show you how you can implement custom cursors with some really simple CSS and JavaScript using jQuery. Both the demo and source can be found below. The source is really simple so I will go over the main points.

Live demo Download source

The HTML

For the HTML, we will make a figure tag and give it an ID to be used in the CSS and JavaScript. I added this in the body because I want my cursor to be changed everywhere. You could add it in another container div  though if you like.

<figure id="mouse-pointer"></figure>

The CSS

The CSS is equally as easy to take care of.

* {
	cursor: none;
}

figure#mouse-pointer {
	background-image: url('../img/pointer.png');
	width: 44px;
	height: 44px;
	position: absolute;
	margin-left: -8px; 
	display: block;
}

We use the background-image property to define our cursor and position to absolute. We can use margin-left to adjust the position.

The JavaScript

And here is the JavaScript where we use jQuery to track the mouse position and adjust the position of the mouse cursor accordingly.

$(function (){

	$(window).mousemove(function(event) {
		$('#mouse-pointer').css({
			'top' : event.pageY + 'px',
			'left' : event.pageX + 'px'
		});
	});

});

This is a nice little trick to spice up your website if used properly under the right circumstances.

Share the knowledge!
000010