Mouse cursor
Everyone knows how does a basic mouse cursor look like, but cursor has much more properties which can be applied with CSS cursor properties. CSS cursor property is used when a curser or mouse pointer moves over a certain area, certain text or over a certain link. The following mouse pointers properties are used in CSS cursors.
a:hover{cursor:default;}
a:hover{cursor:pointer;}
a:hover{cursor:text;}
a:hover{cursor:wait;}
a:hover{cursor:help;}
a:hover{cursor:progress;}
a:hover{cursor:crosshair;}
a:hover{cursor:url(“custom.cur”), default;}
a:hover{cursor:move;}
Let us now write a code for some of cursor properties to check its different shapes while moving pointer over text. You can copy code and paste it in a notepad and then open with browser.
<!doctype html>
<head>
<style>
#thin:hover{
cursor:default;
}
#medium:hover{
cursor:pointer;
}
#thick:hover{
cursor:text;
}
#value:hover{
cursor:wait;
}
#move:hover{
cursor:move;
}
</style>
</head>
<body>
<p id="thin">
The first para with default cursor.
</p>
<p id="medium">
The second para with pointer cursor.
</p>
<p id="thick">
The third para with text cursor.
</p>
<p id="value">
The fourth para with wait cursor.
</p>
<p id="move">
The fourth para with move cursor.
</p>
</body>
</html>
You may also like to learn these posts
How to style tables with collapse-separate-caption in CSS?
How to set margin properties in CSS (cascading style sheet)?
