Get started with your mouse cursor icons

You probably have seen many different mouse cursor icons when surfing the internet. For example, when you are selecting text, the mouse cursor icon turns into an “I”. This is not a difficult task to accomplish with CSS. 

The syntax for a customized cursor is:

Selector {cursor: value;}

For example,if you have assigned a class to your navigation bar as nav and you’d like to have a little hand when hovering, the code is as simple as this:

.nav {cursor: pointer;}

Doesn’t your web page look cooler with a well-placed cursor icon change? Here is a list of the most commonly accepted cursors for your reference:

    default – The normal mouse cursor icon looks like a skewed arrow

    wait – The icon to represent the computer “thinking” or “loading”

    crosshair – A cross hair reticle

    text – An “I” shaped icon that is displayed when selecting text

    pointer – A hand icon when you hover over an HTML link

    help – A question mark

Beyond these regular icons, there are some fancier icons that you can put into your blog and add a bit of excitement. Say Halloween is approaching and you’d like to add some Halloween-related icons onto your webpage, you’ll have to first download some icons from the Internet, save them in your root folder, and then upload it from a local url.

.nav {cursor: url(icons/Halloween.cur);}

Internet Explorer can now supports .cur and .ani as formats, while Safari accepts .cur, .png, .gif and .jpg.

Here are some useful links where you can download free cursor icons:

Thank you for your time. Hopefully you’ve enjoyed my post!

Yang Chen


~ by yangchen29 on September 16, 2012.

%d bloggers like this: