Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Working with Different types of CSS Cursors

In this article I will cover the different types of CSS cursors, giving you by examples the basic understanding and implementation idea about cursors.

Introduction:

This article will discuss the CSS cursor property, The article will cover the different types of cursor by pointing on any html element (Text, Images).

In this section I will show how to change the mouse cursor icon for a few different HTML elements. Below is a list of the most commonly used cursors.

  • A hand icon that you see when you hover over an HTML link :(By Default )
  • An "I" shaped icon that is displayed when selecting text :(Text )
  • The mouse icon to represent the computer processing :(Wait)
  • A question mark (Help)
  • Display the normal mouse cursor icon :(Pointer )

There are various categories of customized cursor, few of them are default cursor, Basic cursor, Text cursor, Resize cursor and Table cursor .

Customized the Cursor:

There are various ways to customize cursor, The syntax for a customized cursor is this:

Selector  {cursor:value} 

Following script will clear the concept of customizing the cursor on page.

Listing 1: Script to customize the cursor

<html>
<head>
<title>Mrbool.com Tutorials - Cursor</title>
<style type="text/css">
.blink {cursor:crosshair}
.clink{cursor:help}
.dlink{ cursor: pointer;}	
.elink{ cursor: text; }	
.flink{ cursor: move; }	
.glink{ cursor: wait; }	
.hlink{ cursor: help; }	
.ilink{ cursor: progress; }	
.jlink{ cursor: not-allowed; }	
.klink{ cursor: no-drop; }	

.llink{ cursor: no-vertical-text; }	
.mlink{ cursor: all-scroll; }	
.nlink{ cursor: col-resize; }	
.olink{ cursor: row-resize; }	
.plink{ cursor: e-resize; }	
.qlink{ cursor: ne-resize; }	
.rlink{ cursor: n-resize; }	
.slink{ cursor: nw-resize; }	
.tlink{ cursor: w-resize; }	
.ulink{ cursor: sw-resize; }	
.vlink{ cursor: s-resize; }	
.wlink{ cursor: se-resize; }
</style>
</head>

<body>
<strong>
<a href="page.html" class="blink">crosshair Link point to see the action</a>
<br>
<a href="page.html" class="clink">help Link point to see the action</a>
<br>
<a href="page.html" class="dlink">pointer Link point to see the action</a>
<br>
<a href="page.html" class="elink">text Link point to see the action</a>
<br>
<a href="page.html" class="flink">move Link point to see the action</a>
<br>
<a href="page.html" class="glink">wait Link point to see the action</a>
<br>
<a href="page.html" class="hlink">help  Link point to see the action</a>
<br>
<a href="page.html" class="ilink">progress Link point to see the action</a>
<br>
<a href="page.html" class="jlink">not allowed  Link point to see the action</a>
<br>
<a href="page.html" class="klink"> no drop text Link point to see the action</a>
<br>
<a href="page.html" class="llink">no verticle Link point to see the action</a>
<br>
<a href="page.html" class="mlink">all scroll Link point to see the action</a>
<br>
<a href="page.html" class="nlink">coll resize  Link point to see the action</a>
<br>
<a href="page.html" class="olink">row resize Link point to see the action</a>
<br>
<a href="page.html" class="plink">e resize  Link point to see the action</a>
<br>
<a href="page.html" class="qlink">ne resize Link point to see the action</a>
<br>
<a href="page.html" class="rlink">n resize Link point to see the action</a>
<br>
<a href="page.html" class="slink">nw resize Link point to see the action</a>
<br>
<a href="page.html" class="tlink">w resize Link point to see the action</a>
<br>
<a href="page.html" class="ulink">sw resize Link point to see the action</a>
<br>
<a href="page.html" class="vlink">s resize Link point to see the action</a>
<br>
<a href="page.html" class="wlink">se resize Link point to see the action</a>

</strong>
</body>
</html>
 
figure is output of script which explained the various customized cursor on page

Figure 1: above figure is output of script which explained the various customized cursor on page.

You can also have one appearance of the cursor in one area of the page and another appearance of the cursor in another area, there is method of doing called context dependant selectors. Here you can create different styles for links that are dependent on the context. If the related context is set with a false of dummy tag, like <span> you don’t need to mention the style each and every time there is a link in this section. Following example will clear the concept of area covering with particular cursor.

Listing 2: Script to add a cursor for particular area

	
<html>
<head>
<title>Mrbool.com Tutorials - Cursor</title>
<style type="text/CSS">
.alink A{cursor:crosshair}
.blink A{cursor:help}
</style>
</head>

<body>
<strong>
<p>Area below this text contains only crosshair</p>
<span class="alink">
<a href="www.facebook.com">=========</a><br>
<a href="www.facebook.com">=========</a><br>
<a href="www.facebook.com">=========</a><br>
<a href="www.facebook.com">=========</a><br>
<a href="www.facebook.com">=========</a><br>
<a href="www.facebook.com">=========</a><br>
</span>
<br>
<p>Area below this text contains only help cursor</p>
<span class="blink">
<a href="www.facebook.com">||||||||||||||||||||||||||||||||||||</a><br>
<a href="www.facebook.com">||||||||||||||||||||||||||||||||||||</a><br>
<a href="www.facebook.com">||||||||||||||||||||||||||||||||||||</a><br>
<a href="www.facebook.com">||||||||||||||||||||||||||||||||||||</a><br>
<a href="www.facebook.com">||||||||||||||||||||||||||||||||||||</a><br>
<a href="www.facebook.com">||||||||||||||||||||||||||||||||||||</a><br>
</span>
</strong>
</body>
</html>
 
Above output is showing different cursor for different areas

Figure 2: Above output is showing different cursor for different areas.

Using CSS You can change the by default cursor icon attached with a particular html element, even specifying your own image instead. Change the cursor icon only when it makes sense to, such as when you're doing it to a custom module.

Conclusion:

This tutorial covered the concept of CSS cursor. Hope it given you basic understanding and implementation idea about cursors. Go through the examples and let us know If you have any question.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login