Mouse Cursor CSS

Trick CSS berikut ini bisa kamu lakukan untuk membuat mouse cursor icon berubah saat dilayangkan diatas text.

Cursor icon

Mouse cursor icon bisa kamu rubah menjadi beberapa bentuk. Dibawah ini adalah daftarnya:

  • default – Menampilkan cursor mouse icon default
  • wait – Menampilkan cursor computer sedang proses
  • crosshair – Menampilkan cursor tambah
  • text – Menampilkan cursor [I] saat sedang menulis atau edit text
  • pointer – Menampilkan icon tangan saat kamu melayangkan mouse diatas sebuah link
  • help – Menampilkan cursor icon tanda tanya

Cursor code

Sekarang mari kita praktekkan langsung code untuk mouse cursor ini biar lebih cepat dimengerti.

Code cursor CSS:

p { cursor: default }
h2 { cursor: wait }
h3 { cursor: crosshair }
h4 { cursor: text }
h5 { cursor: pointer }
h6 { cursor: help }

Hasil code cursor CSS:

Tampilkan symbol cursor default

Tunggu, kami sedang proses

Cursor diatas tulisan ini berbentuk tambah

Cursor diatas tulisan ini berbentuk [I]

Coba angkat tanganmu keatas
Apa yang bisa kami bantu?

Layangkan mouse cursor kamu diatas tulisan-tulisan diatas dan perhatikan apa yang terjadi! Kalau kamu menggunakan code cursor CSS ini dengan baik maka blog kamu akan terlihat semakin menarik. Tetapi sebaliknya kalau kombinasi cursor yang kamu gunakan terlihat membingungkan bagi visitor maka blog kamu akan terlihat tidak professional.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>