-->

CSS Cursor Tutorial

CSS Cursor Tutorial

CSS Cursor Tutorial

CSS Cursor Tutorial:

Hovering the mouse over any link or text usually shows hand marks or arrow marks etc. This symbol can be modified with CSS. There is a property called cursor that can be modified, cursor has many values ​​such as



a.one{cursor : wait;}
a.two{cursor: crosshair;}
p.three{cursor: help;}
a.four{cursor: pointer;}
p.five{cursor: text;}
p.six{cursor: none;}
p.seven{cursor: context-menu;}p.eight{cursor: cell;}
p.nine{cursor: vertical-text;}
p.ten{cursor: alias;}
p.eleven{cursor: n-resize;}
p.twelve{cursor: no-drop;}
p.thirteen{cursor: not-allowed;}
p.fourteen{cursor: all-scroll;}
p.fifteen{cursor: col-resize;}
p.sixteen{cursor: row-resize;}
p.seventeen{cursor: n-resize;}

See application

<!DOCTYPE html>
<html>
<head>
<style>
a.one{cursor : wait;}
a.two{cursor: crosshair;}
p.three{cursor: help;}
a.four{cursor: pointer;}
p.five{cursor: text;}
p.six{cursor: none;}
p.seven{cursor: context-menu;}
p.eight{cursor: cell;}
p.nine{cursor: vertical-text;}
p.ten{cursor: alias;}
p.eleven{cursor: n-resize;}
p.twelve{cursor: no-drop;}
p.thirteen{cursor: not-allowed;}
p.fourteen{cursor: all-scroll;}
p.fifteen{cursor: col-resize;}
p.sixteen{cursor: row-resize;}
p.seventeen{cursor: n-resize;}
</style>
</head>
<body>
<a class="one" href="http://www.Myhtmlcode.com">CSS Tutorial</a><br/>
<a class="two" href="http://www.Myhtmlcode.com">CSS Tutorial</a></br/>
<p class="three">CSS cursor tutorials</p>
<a class="four" href="http://www.Myhtmlcode.com</a></br>
<p class="five">CSS tutorial</p>
<p class="six">CSS tutorial</p>
<p class="seven">CSS tutorial</p>
<p class="eight">CSS tutorial</p>
<p class="nine">CSS tutorial</p>
<p class="ten">CSS tutorial</p>
<p class="eleven">CSS tutorial</p>
<p class="twelve">CSS tutorial</p>
<p class="thirteen">CSS tutorial</p>
<p class="fourteen">CSS tutorial</p>
<p class="fifteen">CSS tutorial</p>
<p class="sixteen">CSS tutorial</p>
<p class="seventeen">CSS tutorial</p>
</body>
</html>


There are more like that

{ cursor: w-resize;}
{ cursor: ns-resize;}
{ cursor: ew-resize;}
{ cursor: ne-resize;}
{ cursor: nw-resize;}
{ cursor: se-resize;}
{ cursor: sw-resize;}
{ cursor: nesw-resize;}
{ cursor: nwse-resize;}
{cursor: url(images/my-cursor.png), auto;}

Some browsers do not support cursor values, such as cursor: none; Not supported on Firefox 3, Safari 5 and Chrome 5. Again the picture does not support Opera and IE + Opera does not support the following.

{cursor: not-allowed;}
{cursor: no-drop;}
{cursor:vertical-text;}
{cursor: all-scroll;}
{cursor: col-resize;}
{cursor: row-resize;}

Facebook Comments

Follow by Email