Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Explaination of cursor property

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 302
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: