Membuat Jenis Tampilan Kursor Berbeda Saat Hover Di Blog

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Baca Juga

Apa itu kursor?

Berdasarkan hasil yang saya dapatkan dari Wikipedia, Kursor adalah suatu petunjuk atau indikator posisi pada monitor komputer atau peranti tampilan lain yang akan merespons masukan dari suatu masukan teks atau peranti penunjuk, atau istilah lainnya indikator atau pointer dari perangkat penunjuk seperti mouse.

Contoh Tampilan Kursor

Kursor memiliki jenis tampilan yang berbeda-beda menurut apa yang ia sorot (hover). Contoh mudahnya kalian dapat melihatnya pada sistem operasi yang terinstall di laptop atau komputer yang kalian gunakan, tak jarang pada suatu website menggunakan cara ini untuk mempermudah pengalaman pengguna saat mengunjungi website tersebut, berikut ini merupakan contoh tampilan kursor yang berbeda saat hover dan juga fungsinya.

Value	Demo Cursor	Penulisan
default	CONTOH (HOVER)	cursor : default
crosshair	CONTOH (HOVER)	cursor : crosshair
hand	CONTOH (HOVER)	cursor : hand
pointer	CONTOH (HOVER)	cursor : pointer
Cross browser	CONTOH (HOVER)	cursor : hand
move	CONTOH (HOVER)	cursor : move
text	CONTOH (HOVER)	cursor : text
wait	CONTOH (HOVER)	cursor : wait
help	CONTOH (HOVER)	cursor : help
n-resize	CONTOH (HOVER)	cursor : n-resize
ne-resize	CONTOH (HOVER)	cursor : ne-resize
e-resize	CONTOH (HOVER)	cursor : e-resize
se-resize	CONTOH (HOVER)	cursor : se-resize
s-resize	CONTOH (HOVER)	cursor : s-resize
sw-resize	CONTOH (HOVER)	cursor : sw-resize
w-resize	CONTOH (HOVER)	cursor : w-resize
nw-resize	CONTOH (HOVER)	cursor : nw-resize
progress	CONTOH (HOVER)	cursor : progress
not-allowed	CONTOH (HOVER)	cursor : not-allowed
vertical-text	CONTOH (HOVER)	cursor : vertical-text
all-scroll	CONTOH (HOVER)	cursor : all-scroll
col-resize	CONTOH (HOVER)	cursor : col-resize
row-resize	CONTOH (HOVER)	cursor : row-resize

Untuk penggunanya, silakan sisipkan salah satu jenis cursor di atas sesuai kebutuhan. Sebagai contoh di bawah ini kode CSS nya :

cursor:hover {
color:#fff !important;
background:#111;
padding:5px;
transition-duration:2s;
-moz-transition-duration:2s;
-webkit-transition-duration:2s;
cursor:help;
}

Referensi : https://www.arlinadzgn.com/

Demikianlah artikel mengenai Membuat Jenis Tampilan Kursor Berbeda Saat Hover Di Blog kali ini, mudah-mudahan bisa membantu anda dan memberi manfaat untuk anda semua. Baiklah, sampai jumpa di postingan artikel lainnya.

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

TerEue Blogspot memiliki kebijakan dalam hal konten, seperti rewrite/repost juga share yang mengharuskan pengguna untuk mencantumkan sumber yang jelas jika ingin memakai konten kami sebagai referensi. Maka dari itu, jika ada yang melanggar , kami tidak akan segan untuk melakukan takedown ataupun pelaporan dan pemberitaan masalah pencurian konten dari situs kami.
Baca lebih lanjut kebijakan konten disini.

Beberapa artikel di blog ini terkadang berisi informasi dari berbagai macam sumber. Hak cipta berupa gambar, teks, dan link sepenuhnya dimiliki oleh web tersebut. Jika ada masalah terkait hal ini, Anda dapat menghubungi kami disini.

Mhd Amirul Azhar

Kalau orang lain bisa, kenapa harus saya?

Jika Anda merasa bahwa artikel-artikel di blog ini bermanfaat, Anda bisa memberikan donasi melalui Paypal atau dengan Pulsa Dana hasil dari donasi akan digunakan untuk mengganti subdomain tereue.blogspot.com menjadi Top Level Domain - Terima kasih.

Bagikan Artikel Ini

Bagikan dengan shortlink Google : Dapatkan Shortlink

Posting Terkait

Berlangganan update artikel terbaru melalui email: