在CSS 中使用自訂遊標影像
您可能偶爾需要使用自訂遊標影像,例如放大網頁鏡,以實現特定目的上的元素。雖然這在許多瀏覽器中都可以輕鬆實現,但 Firefox 提出了獨特的挑戰。
設定自訂遊標的常見方法是透過 CSS。然而,不幸的是,使用者提供的程式碼 a.heroshot img {cursor:url(/img/magnify.cur),pointer;} 在 Firefox 中不起作用。
問題在於以下事實: macOS 上的 Firefox 不支援使用基於 URL 的遊標定義。要解決此問題,您可以使用-moz-zoom-in 關鍵字:
a.heroshot img { cursor: url(/img/magnify.cur), -moz-zoom-in, auto; }
此更新的CSS 程式碼將在支援它的瀏覽器上顯示magnify.cur 圖像,Firefox 特定的縮放遊標將在Firefox 或系統預設遊標(如果兩者都不支援)。將應用程式瀏覽器識別的清單中的第一個遊標。
需要注意的是,您可以在線找到不同瀏覽器支援的遊標關鍵字列表,以確保跨平台的兼容性。
以上是如何在 CSS 中設定自訂遊標圖像,尤其是在 Firefox 中?的詳細內容。更多資訊請關注PHP中文網其他相關文章!