Using CSS, different types of mouse cursor effects can be easily created. Then the mouse pointer's shape will change when the mouse moves over that element. Therefore, declare in the style sheet is like cursor: move. Here instead of move auto, crosshair, e-resize, move, default, help, n-resize, ne-resize, nw-resize, pointer, wait, progress, s-resize, se-resize, sw-resize, w- resize, text can be used.
Practicing Project
<html>
<head>
<title> www.codetones.com</title>
<style>
body{background:#efefef;
font-family:Arial, Helvetica, sans-serif;
color:#066;}
</style>
</head>
<body >
<h2 style="cursor:auto">Touche me and see auto mouse effect</h2>
<h2 style="cursor:help">Touche me and see help mouse effect</h2>
<h2 style="cursor:s-resize">Touche me and see s-resize mouse effect</h2>
<h2 style="cursor:e-resize">Touche me and see e-resize mouse effect</h2>
<h2 style="cursor:progress">Touche me and see progress mouse effect</h2>
<h2 style="cursor:move">Touche me and see move mouse effect</h2>
<h2 style="cursor:crosshair">Touche me and see crosshair mouse effect</h2>
<h2 style="cursor:default">Touche me and see default mouse effect</h2>
<h2 style="cursor:wait">Touche me and see wait mouse effect</h2>
<h2 style="cursor:n-resize">Touche me and see n-resize mouse effect</h2>
<h2 style="cursor:nw-resize">Touche me and see nw-resize mouse effect</h2>
<h2 style="cursor:ne-resize">Touche me and see ne-resize mouse effect</h2>
<h2 style="cursor:pointer">Touche me and see pointer mouse effect</h2>
<h2 style="cursor:se-resize">Touche me and see se-resize mouse effect</h2>
<h2 style="cursor:sw-resize">Touche me and see sw-resize</h2>
<h2 style="cursor:text">Touche me and see text mouse effect</h2>
<h2 style="cursor:w-resize">Touche me and see w-resize mouse effect</h2>
</body>
</html>
Open a Notepad and enter the code at the top and save it from the file menu and click Save as as file name: index.html, Save as type: Save all files, index.html file with Mozilla Firefox and see how it looks.
