1 Star2 Stars3 Stars4 Stars5 Stars (9 votes, average: 5.00 out of 5)

Setting Up a Cursor Pointer in CSS

This tutorial will be on setting up a cursor pointer in CSS. There are many methods to setting up a cursor pointer in CSS. A webmaster or web developer can virtually set up unlimited amounts of pointers in CSS. Below is a list of cursor styles in CSS that you can easily implement. Hover over each one to see what they do.

  • auto
  • crosshair
  • default
  • e-resize
  • grab
  • help
  • move
  • n-resize
  • ne-resize
  • nw-resize
  • pointer
  • progress
  • s-resize
  • se-resize
  • sw-resize
  • text
  • w-resize
  • wait
  • not-allowed
  • no-drop

CSS codes for the different cursor functions. *

<ul>
<li style="cursor:auto">auto</li>
crosshair">crosshair
<li style="cursor:default">default</li>
<li style="cursor:e-resize">e-resize</li>
<li style="cursor:grab">grab</li>
<li style="cursor:help">help</li>
<li style="cursor:move">move</li>
<li style="cursor:n-resize">n-resize</li>
<li style="cursor:ne-resize">ne-resize</li>
<li style="cursor:nw-resize">nw-resize</li>
<li style="cursor:pointer">pointer</li>
<li style="cursor:progress">progress</li>
<li style="cursor:s-resize">s-resize</li>
<li style="cursor:se-resize">se-resize</li>
<li style="cursor:sw-resize">sw-resize</li>
<li style="cursor:text">text</li>
<li style="cursor:w-resize">w-resize</li>
<li style="cursor:wait">wait</li>
<li style="cursor:not-allowed">not-allowed</li>
<li style="cursor:no-drop">no-drop</li>
</ul>

More Advanced CSS Cursor Pointer Features *

 

  • alias
  • all-scroll
  • auto
  • cell
  • context-menu
  • col-resize
  • copy
  • crosshair
  • default
  • e-resize
  • ew-resize
  • grab
  • grabbing
  • help
  • move
  • n-resize
  • ne-resize
  • nesw-resize
  • ns-resize
  • nw-resize
  • nwse-resize
  • no-drop
  • none
  • not-allowed
  • pointer
  • progress
  • row-resize
  • s-resize
  • se-resize
  • sw-resize
  • text
  • Image
  • vertical-text
  • w-resize
  • wait
  • zoom-in
  • zoom-out
  • initial
<ul>
<li style="cursor:alias">alias</li>
<li style="cursor:all-scroll">all-scroll</li>
<li style="cursor:auto">auto</li>
<li style="cursor:cell">cell</li>
<li style="cursor:context-menu">context-menu</li>
<li style="cursor:col-resize">col-resize</li>
<li style="cursor:copy">copy</li>
<li style="cursor:crosshair">crosshair</li>
<li style="cursor:default">default</li>
<li style="cursor:e-resize">e-resize</li>
<li style="cursor:ew-resize">ew-resize</li>
<li style="cursor:grab">grab</li>
<li style="cursor:grabbing">grabbing</li>
<li style="cursor:help">help</li>
<li style="cursor:move">move</li>
<li style="cursor:n-resize">n-resize</li>
<li style="cursor:ne-resize">ne-resize</li>
<li style="cursor:nesw-resize">nesw-resize</li>
<li style="cursor:ns-resize">ns-resize</li>
<li style="cursor:nw-resize">nw-resize</li>
<li style="cursor:nwse-resize">nwse-resize</li>
<li style="cursor:no-drop">no-drop</li>
<li style="cursor:none">none</li>
<li style="cursor:not-allowed">not-allowed</li>
<li style="cursor:pointer">pointer</li>
<li style="cursor:progress">progress</li>
<li style="cursor:row-resize">row-resize</li>
<li style="cursor:s-resize">s-resize</li>
<li style="cursor:se-resize">se-resize</li>
<li style="cursor:sw-resize">sw-resize</li>
<li style="cursor:text">text</li>
url(https://a1websitepro.com/wp-content/uploads/2015/05/html-150x150.png),pointer,auto">Image
<li style="cursor:vertical-text">vertical-text</li>
<li style="cursor:w-resize">w-resize</li>
<li style="cursor:wait">wait</li>
<li style="cursor:zoom-in">zoom-in</li>
<li style="cursor:zoom-out">zoom-out</li>
<li style="cursor:initial">initial</li>
</ul>

Depending on the application that you are creating make a CSS cursor that makes sense to the user.  As you can see there is a wide variety of CSS Cursors that you can take advantage of. I hope you enjoyed this tutorial on Setting Up a Cursor Pointer in CSS. 🙂

Setting Up a Cursor Pointer in CSS was last modified: May 27th, 2015 by Maximus Mccullough

Subscribe To My YouTube Channel:
Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips

Tips

Setting Up a Cursor Pointer in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.