Bagaimana untuk Menetapkan Imej Kursor Tersuai dalam CSS, Terutamanya dalam Firefox?

Menggunakan Imej Kursor Tersuai dalam CSS

Anda mungkin sekali-sekala mahu menggunakan imej kursor tersuai, seperti kaca pembesar, untuk sesuatu yang khusus elemen pada halaman web. Walaupun ini boleh dicapai dengan mudah dalam banyak penyemak imbas, Firefox memberikan cabaran yang unik.

Satu kaedah biasa untuk menetapkan kursor tersuai adalah melalui CSS. Walau bagaimanapun, kod yang disediakan oleh pengguna, a.heroshot img {cursor:url(/img/magnify.cur), pointer;}, malangnya tidak berfungsi dalam Firefox.

Isunya terletak pada fakta bahawa Firefox pada macOS tidak menyokong penggunaan definisi kursor berasaskan URL. Untuk menyelesaikan masalah ini, anda boleh menggunakan kata kunci -moz-zoom-in sebaliknya:

a.heroshot img {
  cursor: url(/img/magnify.cur), -moz-zoom-in, auto;
}

Kod CSS yang dikemas kini ini akan memaparkan imej magnify.cur pada pelayar yang menyokongnya, kursor zum khusus Firefox dihidupkan Firefox, atau kursor lalai sistem jika kedua-duanya tidak disokong. Kursor pertama pada senarai yang dikenali oleh penyemak imbas akan digunakan.

Adalah penting untuk ambil perhatian bahawa anda boleh mencari senarai kata kunci kursor yang disokong oleh penyemak imbas yang berbeza dalam talian untuk memastikan keserasian merentas platform.

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan Imej Kursor Tersuai dalam CSS, Terutamanya dalam Firefox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!