Mouse Cursor image change by using style sheet
Move your mouse over the right side cell ( link ) to see the change in cursor shape.
| <a href=# style=cursor:crosshair;>Crosshair</a> | Crosshair |
| <a href=# style=cursor:text;>text</a> | Text |
| <a href=# style=cursor:wait;>wait</a> | Wait |
| <a href=# style=cursor:move;>move</a> | Move |
| <a href=# style=cursor:help;>help</a> | Help |
| <a href=# style=cursor:default;>default</a> | Dafault |
| <a href=# style=cursor:hand;>hand</a> | hand |
We can change the appearance of mouse cursor depending on our requirement by using style sheet. We will try to declare locally the style of the cursor and based on that the cursor shape will change. This is required to give a better picture to our visitors. For example mouse over on a help link should change the cursor to help picture. If we are displaying a map for our visitors and wants our visitor to click any portion of the map to enlarge ( zoom ) it then it is better to use cross hair cursor.
CSS code Generator
HTML Borders with CSS Header with CSS
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
Connect:
This article is written by plus2net.com team.
