blog

Home / DeveloperSection / Blogs / Cursor Properties in CSS3

Cursor Properties in CSS3

Vijay Shukla4857 15-Dec-2012

In this blog I am trying to explain the different type of cursor values.

Example the below code: when my mouse hover to any word, then that mouse pointer will change on its named cursor like (wait, auto, default etc).

<!DOCTYPE html> 
<html>
<body>
<p>Mouse over the words to change the cursor.</p>
<span style="cursor:auto"><img src="1.jpg" height="30px" width="30px"/>auto</span><br> <span style="cursor:crosshair"><img src="2.jpg" height="30px" width="30px"/>crosshair</span><br> <span style="cursor:default"><img src="3.jpg" height="30px" width="30px"/>default</span><br> <span style="cursor:e-resize"><img src="4.jpg" height="30px" width="30px”/>e-resize</span><br> <span style="cursor:help"><img src="6.jpg" height="30px" width="30px"/>help</span><br> <span style="cursor:move"><img src="5.jpg" height="30px" width="30px"/>move</span><br> <span style="cursor:n-resize"><img src="7.jpg" height="30px" width="30px"/>n-resize</span><br> <span style="cursor:ne-resize"><img src="8.jpg" height="30px" width="30px"/>ne-resize</span><br> <span style="cursor:nw-resize"><img src="9.jpg" height="30px" width="30px"/>nw-resize</span><br> <span style="cursor:pointer"><img src="10.jpg" height="30px" width="30px"/>pointer</span><br> <span style="cursor:progress"><img src="11.jpg" height="30px" width="30px"/>progress</span><br> <span style="cursor:wait"><img src="12.jpg" height="30px" width="30px"/>wait</span><br> </body> </html>

cursor:auto

here cursor is the property and its value is auto.

Output:

If I go to on the progress word them cursor will show:

Cursor Properties in CSS3

Updated 18-Sep-2014

Leave Comment

Comments

Liked By