CSS Cursor Types
wait - Mouse Pointer will show like circle or hourglass.
crosshair - Mouse Pointer will show like gun-style cross.
text - Mouse Pointer will show like an "I" shaped icon.
pointer - Mouse Pointer will show like hand icon.
help - Mouse Pointer will show like an arrow with a question mark.
Example: 1(default)
<html>
<head>
<style type="text/css">
.cursor-type{cursor: default; }
</style>
</head>
<body>
<p class="cursor-type">Default(Mouse Pointer will show like Default sign)</p>
</body>
</html>
<head>
<style type="text/css">
.cursor-type{cursor: default; }
</style>
</head>
<body>
<p class="cursor-type">Default(Mouse Pointer will show like Default sign)</p>
</body>
</html>
Output
Default(Mouse Pointer will show like Default sign)
Example: 2(wait)
<html>
<head>
<style type="text/css">
.cursor-type{ cursor: wait; }
</style>
</head>
<body>
<p id="circle">Circle(Mouse Pointer will show like Circle sign)</p>
</body>
</html>
<head>
<style type="text/css">
.cursor-type{ cursor: wait; }
</style>
</head>
<body>
<p id="circle">Circle(Mouse Pointer will show like Circle sign)</p>
</body>
</html>
Output
Circle(Mouse Pointer will show like Circle sign)
Example: 3(crosshair)
<html>
<head>
<style type="text/css">
.cursor-type{cursor: crosshair; }
</style>
</head>
<body>
<p class="cursor-type"> crosshair (Mouse Pointer will show like gun-style cross.)</p>
</body>
</html>
<head>
<style type="text/css">
.cursor-type{cursor: crosshair; }
</style>
</head>
<body>
<p class="cursor-type"> crosshair (Mouse Pointer will show like gun-style cross.)</p>
</body>
</html>
Output
crosshair (Mouse Pointer will show like gun-style cross.)
Example: 4(text)
<html>
<head>
<style type="text/css">
.cursor-type{cursor: text;}
</style>
</head>
<body>
<p class="cursor-type">text (Mouse Pointer will show like Text sign.)</p>
</body>
</html>
<head>
<style type="text/css">
.cursor-type{cursor: text;}
</style>
</head>
<body>
<p class="cursor-type">text (Mouse Pointer will show like Text sign.)</p>
</body>
</html>
Output
text (Mouse Pointer will show like an "I" shaped icon.)
Example: 5(pointer)
<html>
<head>
<style type="text/css">
.cursor-type{ cursor: pointer;}
</style>
</head>
<body>
<p class="cursor-type"> pointer(Mouse Pointer will show like hand icon.)</p>
</body>
</html>
<head>
<style type="text/css">
.cursor-type{ cursor: pointer;}
</style>
</head>
<body>
<p class="cursor-type"> pointer(Mouse Pointer will show like hand icon.)</p>
</body>
</html>
Output
pointer(Mouse Pointer will show like hand icon.)
Example: 6(help)
<html>
<head>
<style type="text/css">
.cursor-type{ cursor: help;}
</style>
</head>
<body>
<p class="cursor-type"> help(Mouse Pointer will show like an arrow with a question mark.)</p>
</body>
</html>
<head>
<style type="text/css">
.cursor-type{ cursor: help;}
</style>
</head>
<body>
<p class="cursor-type"> help(Mouse Pointer will show like an arrow with a question mark.)</p>
</body>
</html>
Output
help(Mouse Pointer will show like an arrow with a question mark.)
No comments:
Post a Comment