Cursor Property is used in CSS for defining the property of the cursor or the mouse cursor will look when User hover on it. The cursor-property is set to the element and it will give new look to the mouse pointer, It has various properties which convey a message to the user for explaining the certain functionality.
Some property is understandable from the name, as we might aware few of them like cursor:pointer, cursor:progress, cursor:zoom-in, cursor:zoom-out.
For example:
<span style="cursor:pointer">pointer</span>
<span style="cursor:progress">progress</span>
<span style="cursor:zoom-in">zoom-in</span>
<span style="cursor:zoom-out">zoom-out</span>
Other properties which is used is explained below:-
<span style="cursor:se-resize">sw-resize</span>
<span style="cursor:se-resize">se-resize</span>
If user set the value cursor property to sw-resize, his cursor will look like an arrow having heads on both of the sides, pointing towards south west or by using se-resize it is used for the direction toward south east. Like that it has numerous properties which has its own meaning that is used for different purpose.
Here is simple example which helps the user for understanding the code easily.
<!DOCTYPE html>
<html>
<style>
span{width:80px; height:30px; float:left; border:3px solid green; margin:10px; text-align: center;
font-family:Verdana;color:#555; padding:5px;font-size:14px;border-radius:5px;font-weight: 800;
box-shadow:inset 5px 5px 5px #666;}
</style>
<body>
<p>Hover the mouse over the boxes to see the cursor appearance.</p>
<span style="cursor:alias">alias</span>
<span style="cursor:cell">cell</span>
<span style="cursor:col-resize">col-resize</span>
<span style="cursor:copy">copy</span>
<span style="cursor:crosshair">crosshair</span>
<span style="cursor:e-resize">e-resize</span>
<span style="cursor:ew-resize">ew-resize</span>
<span style="cursor:help">help</span>
<span style="cursor:move">move</span>
<span style="cursor:n-resize">n-resize</span>
<span style="cursor:ne-resize">ne-resize</span>
<span style="cursor:nesw-resize">nesw-resize</span>
<span style="cursor:nwse-resize">nwse-resize</span>
<span style="cursor:no-drop">no-drop</span>
<span style="cursor:none">none</span>
<span style="cursor:not-allowed">not-allowed</span>
<span style="cursor:pointer">pointer</span>
<span style="cursor:progress">progress</span>
<span style="cursor:row-resize">row-resize</span>
<span style="cursor:s-resize">s-resize</span>
<span style="cursor:se-resize">se-resize</span>
<span style="cursor:text">text</span>
<span style="cursor:vertical-text">vertical-text</span>
<span style="cursor:w-resize">w-resize</span>
<span style="cursor:wait">wait</span>
<span style="cursor:zoom-in">zoom-in</span>
<span style="cursor:zoom-out">zoom-out</span>
</body>
</html>
0 Comment(s)