CSS-Cursor Property

Have you ever wondered how the cursor changes as you hover over different elements in a website? Well let me tell you that the science behind it is not too difficult at all! There is a property in CSS called the Cursor Property which allows you to do this.

A cursor even though is a minuscule object compared to the screen space of a webpage, it tells us a lot of things. In a sense,  it gives an indication  of  the current status of the web site. It can tell you whether something you requested for is under progress, or you have to wait or whether you are hovering over a button.

Below are a list of cursor types which you would have probably noticed while surfing the web.

download This is the normal shape of a cursor. Known as default

download (1) This indicates that you are hovering over an element which can be a button or                           an image. Known as Pointer

download2 This indicates that something which you requested for is still in progress.                                   Known as Progress

download3And this indicates that the web page is loading. Known as wait

This is just a few but there are plenty more cursor types which I bet you would have not even seen!

Anyways in order to change the cursor types  the code for it is-

cursor: value;

And the value can be either-

default

pointer

progress

help

 

For Example

cursor: pointer;

Would indicate that you are hovering over a button or a url. It has the shape of a hand.

And that’s it for today.  Hope you had a pleasant reading!

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s