Cara Menukar Kursor Pada Hover

Isi kandungan:

Cara Menukar Kursor Pada Hover
Cara Menukar Kursor Pada Hover

Video: Cara Menukar Kursor Pada Hover

Video: Cara Menukar Kursor Pada Hover
Video: Cara Mengganti Kursor Mouse di Windows 7/8/10 2024, Mungkin
Anonim

Sebilangan elemen laman web mengubah penampilan mereka ketika melayang dengan tetikus - ini secara lalai ditentukan oleh tetapan bahasa HTML (HyperTxt Markup Language - "Hypertext Markup Language"). Bahasa ini mempunyai alat yang membolehkan anda mengubah tetapan yang sama untuk elemen halaman lain. Sekiranya perlu, anda boleh menggunakan CSS (Cascading Style Sheets) dan bahasa skrip JavaScript sisi pelanggan untuk tujuan ini.

Cara menukar kursor pada hover
Cara menukar kursor pada hover

Arahan

Langkah 1

Gunakan atribut gaya untuk dapat menetapkan pemboleh ubah kursor pada tag objek laman web yang menarik bagi anda. Sebagai contoh, kod HTML dari medan teks input yang memerintahkan penyemak imbas pelawat untuk mengubah penampilan kursor dengan cara yang sama seperti ketika melayang di atas pautan, boleh ditulis seperti ini:

Langkah 2

Pilih penampilan kursor yang dikehendaki dari senarai nilai yang sah untuk parameter kursor. Dalam contoh yang ditunjukkan pada langkah sebelumnya, nilai penunjuk digunakan - nilai tangan mempunyai kesan yang sama. Sebagai tambahan kepada dua nilai ini, pilihan berikut untuk penampilan kursor disediakan: crosshair, e-resize, help, move, n-resize, ne-resize, nw-resize, progress, s-resize, se-resize, ubah saiz sw, teks, ubah saiz, tunggu. Contohnya, untuk menjadikan kursor kelihatan seperti anak panah berkepala dua dari kiri atas ke kanan bawah dalam contoh kod di atas, gunakan ukuran semula nw dan bukannya penunjuk:

Huruf di depan nilai ukuran membantu menentukan arah mana anak panah diarahkan oleh nilai ini - huruf-huruf tersebut, seperti pada kompas, sesuai dengan sebutan titik-titik kardinal. Sebagai contoh, nw bermaksud utara-barat (barat laut), s untuk selatan (selatan), dll.

Langkah 3

Gunakan URL fail dan bukannya nilai yang telah ditentukan jika anda memuat naik gambar kursor anda sendiri dalam format cur asalnya. Untuk melakukan ini, gunakan sintaks berikut:

<input style = "kursor: url (https://someSite.ru/someCursor.cur) "/>

Sekiranya fail tersebut berada di folder yang sama dengan halaman atau subfolder, maka bukannya alamat mutlak, anda boleh menentukan yang relatif.

Langkah 4

Gunakan atribut onmouseover jika anda ingin mengubah penampilan kursor menggunakan JavaScript. Sebagai contoh:

Kod ini akan berfungsi sama seperti contoh pada langkah kedua.

Disyorkan: