In this chapter you will learn:
About cursor property
Values of cursor property with description
Examples of cursor property
CSS cursor property specify the type or style of the cursor when it moved to the specific element which is used this property. If you want to change the style or type of cursor when it moved to a particular element then you can use this property. Mostly this property is used with an anchor tag, menu etc.
Syntax:cursor:value;
Values of cursor property with description:-
| Values | |
|---|---|
| wait | When you move the cursor to the target element it change as the waiting and indicates that it is busy |
| help | Cursor changed as the help symbol and indicates that help is available here |
| text | Indictes the text |
| cell | Cursor indicates a cell and set of cells |
| alias | indicates alias of something |
| auto | It is the default cursor |
| move | Cursor indicates the moving step |
| copy | Indicates that some iteams may be copied |
| pointer | Cursor indicates as a link which points to destination |
| progress | Cursor indicates incomplete work or program is in progress(busy) |
| none | indicates that no corsor type is specified |
| url | Indicates a generic cursor |
| crosshair | This value of cursor render as crosshair |
| no-drop | The cursor indicates that if you have draged an iteam then you can not drop to the target element whose property is no-drop |
| all scroll | The cursor indicates that element or its iteams can be scrolled in ant direction |
| not-allowed | This value indicates that the required action is not allowed |
| zoom-in | Indicates that the element can be zoomed in |
| zoom-out | Indicates that the element can be zoomed out |
| vertical-text | Indicates that vertical-text may be selected |
| context-menu | Indicates that context-menu is available |
| col-resize | Indicates that the column can be resized horizently |
| row-resize | Indicates that the column can be resized vertically |
| e-resize | edge of the box can be moved to east |
| n-resize | edge of the box can be moved to north |
| s-resize | edge of the box can be moved to south |
| w-resize | edge of the box can be moved to west |
| ne-resize | edge of the box can be moved to north and east |
| sw-resize | edge of the box can be moved to south and west |
Example 1. cursor:hand:-
<html>
<head>
<style type="text/css">
a{
cursor:hand;
}
</style>
</head>
<body>
<a href="http://www.google.com">Google</a>
<a href="http://www.yahoo.com">yahoo</a>
<a href="http://www.facebook.com">Facebook</a>
</body>
</html>Guide:-
When you will run the given program then you will get that three menu item has displayed on the web page to move the cursor to any one item (Google/Yahoo/Facebook). Now you will get that the cursor type has changed as a hand.
Output
Summary
In this chapter, you have learned about cursor property and its values with a description so now use the given values of cursor property in your program if it is needed and click on Next button to continue-