---
title: "Cursor Properties in CSS3"  
description: "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 poi"  
author: "Vijay Shukla"  
published: 2012-12-15  
updated: 2014-09-18  
canonical: https://www.mindstick.com/blog/408/cursor-properties-in-css3  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 1 minute  

---

# Cursor Properties in CSS3

In this blog I [am trying](https://answers.mindstick.com/qa/36834/which-two-programming-languages-should-i-master-in-if-i-am-trying-to-get-into-google-or-facebook) to [explain](https://www.mindstick.com/forum/157854/what-is-system-debugging-explain-some-system-debugging-tools-used-in-modern-computer-systems) the different type of [cursor](https://www.mindstick.com/articles/13003/create-a-simple-cursor-in-sql-server) values.\

Example the below code: when my [mouse hover](https://www.mindstick.com/forum/1036/mouse-hover-multiple-buttons) to any word, then that mouse [pointer](https://www.mindstick.com/articles/11/pointers) will change on its named cursor like (wait, auto, [default](https://www.mindstick.com/interview/12771/what-is-the-importance-of-default-resources) 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](https://www.mindstick.com/blog/205/property-notification-in-c-sharp) and its [value](https://www.mindstick.com/articles/23219/an-optimized-description-adds-value-to-experience-and-in-turn-effectively-guest-posting-packages) is auto.

##### Output:

If I go to on the [progress](https://yourviews.mindstick.com/view/284/devotees-arrived-in-prayagraj-while-work-is-still-in-progress) word them cursor will show:

![Cursor Properties in CSS3](https://www.mindstick.com/blogs/b506a0e3-2091-4527-89fd-19e63c26fc69/images/8fdbf4ef-9bd3-47a1-ad9c-35a079a7cd32.png)

---

Original Source: https://www.mindstick.com/blog/408/cursor-properties-in-css3

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
