CSS Cursor Property

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
Description
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
example of cursor:hand

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-

More Articles

 

Share your thought