Home > DeveloperSection > Blogs > Cursor Properties in CSS3

Cursor Properties in CSS3


CSS-CSS3 CSS-CSS3 
Ratings:
0 Comment(s)
 2364  View(s)
Rate this:

Cursor Properties in CSS3

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:


Don't want to miss updates? Please click the below button!

Follow MindStick