Ikon Cursor

Tampilan cursor berdasarkan fungsi

Di halaman ini

1. Ikon Cursor

Tampilan Default Cursor

Tampilan cursor pada umumnya adalah berbentuk panah penunjuk :
Pada saat cursor menyorot teks, tampilannya akan berubah seperti ini :
Tampilan cursor juga berubah dipermukaan elemen tombol atau link menjadi seperti ini :

Tampilan cursor pada dasarnya bergantung terhadap perangkat yang digunakan.
Setiap perangkat misal laptop atau komputer biasanya memiliki pengaturan khusus untuk tampilan cursor.

Dalam CSS pengaturan cursor lebih kepada permintaan agar perangkat menampilkan cursor sesuai nilai properti yang ditentukan.

Tabel nilai properti cursor

Arahkan cursor ke kolom test
untuk melihat tampilan sesuai nilai cursor.

No.	Value	CSS	test
1.	alias	{cursor: alias;}
2.	all-scroll	{cursor: all-scroll;}
3.	auto	{cursor: auto;}
4.	cell	{cursor: cell;}
5.	col-resize	{cursor: col-resize;}
6.	context-menu	{cursor: context-menu;}
7.	copy	{cursor: copy;}
8.	crosshair	{cursor: crosshair;}
9.	default	{cursor: default;}
10.	e-resize	{cursor: e-resize;}
11.	ew-resize	{cursor: ew-resize;}
12.	grab	{cursor: grab;}
13.	grabbing	{cursor: grabbing;}
14.	help	{cursor: help;}
15.	move	{cursor: move;}
16.	n-resize	{cursor: n-resize;}
17.	ne-resize	{cursor: ne-resize;}
18.	nesw-resize	{cursor: nesw-resize;}
19.	ns-resize	{cursor: ns-resize;}
20.	nw-resize	{cursor: nw-resize;}
21.	nwse-resize	{cursor: nwse-resize;}
22.	no-drop	{cursor: no-drop;}
23.	none	{cursor: none;}
24.	not-allowed	{cursor: not-allowed;}
25.	pointer	{cursor: pointer;}
26.	progress	{cursor: progress;}
27.	row-resize	{cursor: row-resize;}
28.	s-resize	{cursor: s-resize;}
29.	se-resize	{cursor: se-resize;}
30.	sw-resize	{cursor: sw-resize;}
31.	text	{cursor: text;}
32.	url	{cursor: url}	test
33.	w-resize	{cursor: w-resize;}
34.	wait	{cursor: wait;}
35.	zoom-in	{cursor: zoom-in;}
36.	zoom-out	{cursor: zoom-out;}

Mengganti ikon cursor

<a href='#'>Teks Link</p>
<style>
p.default{cursor: url(https://img.icons8.com/fluency/48/000000/hand-cursor.png)}
</style>

Arahkan cursor ke contoh link dibawah ini :

Teks Link