Hey everybody I want to let you know that I have undertaken the grueling task of getting the heck away from WordPress. I was so sick of the problems and updates I had to do all the time. I am now using my ezbloo system and I am integrating all my old posts into the new system. It sucks, but in the end, I will save bundles of time. I needed to keep things simple and that is why I created ezbloo. I'll have more on this later for you guys after I am done with the total integration of my old posts here. So if you are looking for a post and need it faster, shoot me an email and I will make it a priority. [email protected]

Setting Up a Cursor Pointer in CSS Edit
Last Update:2024-10-17 19:43:45
The Change:2024-10-16 10:33:26
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/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. :-)