The cursor and CSS
While using browsers or operating systems, we come across different cursors as using the mouse. For example.the hand cursor for links (pointer), ‘I’ style cursor while in a text box etc.
The CSS cursor property lets you specify which type of cursor to show for different elements. For example, specifying different cursor for the main headings and some other for paragraph or Div by using the cursor property.
The example below describes how to show different cursors for different elements of HTML, let us first look at the syntax of cursor CSS property.
CSS cursor Syntax
Following is the general syntax of cursor:
cursor: cursor-value;
Where the cursor value can be a pointer, progress, help, no-drop etc. The example shows different values of CSS cursors.
A cursor hand and other cursors example
This example shows how to use cursor CSS property for different HTML elements including h1, h2, h3, h4, div, <p>, and a link. The default behaviour is changed to the other value of cursor for demonstration purpose.
The h1 uses vertical-text value. The cursor hand (pointer) is used for the <h4> heading and so on, See demo online:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
<html>
<head>
<style>
/*Using cursor */
h1
{
cursor:vertical-text;
}
h2
{
cursor:no-drop;
}
h3
{
cursor:cell;
}
h4
{
cursor:pointer;
}
p
{
cursor:progress;
}
div
{
cursor:pointer;
}
a
{
cursor:help;
}
</style>
</head>
<body>
<h1>This is heading 1 with <b>vertical-text</b> cursor</h1>
<h2>This is heading 2 with <b>no-drop</b> cursor</h2>
<h3>This is heading 3 with <b>all-scroll</b> cursor</h3>
<h4>This is heading 4 with <b>pointer</b> cursor</h4>
<p>This is paragraph element with <b>progress</b> cursor</p>
<div>This is Div element with <b>pointer</b> cursor</div>
<a href=“www.example.com”>help cursor in link</a>
</body>
</html>
|
As you can see, seven types of cursor value are shown in the above example that are used in different HTML elements. As mentioned, the h1 is using vertical-text, h2 using no-drop values.
The <h4> tag is assigned the cursor hand which is basically CSS cursor pointer value. The div is also assigned the pointer cursor. While <p> is using progress.
Also see CSS hover
Leave A Comment?