CSS cursor Property to change cursor type on mouse hover

By Faruque Ahamed Mollick

Did you ever think to change your default cursor type on a web page design or HTML page? Are you tired of using those usual and normal default cursor types? You can see the default cursor as arrow that moves with your mouse movement when you are not focusing on any special element, anchor text etc. In default the link or anchor text (clickable text on a web page) of a web page is always a pointer. Here in this post I am going to list all the CSS cursor property which you can use to change default cursor type on mouse hover.

List of CSS cursor property to change cursor type on mouse hover

To change the cursor property when you hover on a element of a web page you just need to add the CSS code which will change the cursor property. Below you can see an example where I have listed all types of cursor property so that you will able to know about all the types of cursor and can change the default cursor to other cursor that you need:

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

I have added all the necessary CSS code inline (using the style attribute in HTML elements). You can create a div class without adding CSS code inline. Now test this HTML on your browser and you will able to see different types of cursor types. Hover your mouse in each div element and every time you will see a different type of cursor on mouse hover.

So how was that? What is your experience after testing the given HTML code on browser? Share your experience with me. Now you have known about different types of CSS cursor types like crosshair, e-resize, pointer, se-resize, progress, help, move and some more. Often web designers need to use different types of CSS cursor properties to give a nice user experience. So this tutorial type post may really helpful to you.

Leave a Reply

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