1. 程式人生 > >css Cursor:url()自定義滑鼠指標樣式為圖片

css Cursor:url()自定義滑鼠指標樣式為圖片

css自定義滑鼠指標樣式為圖片Cursor:url()的使用,今天在專案中,要用到自定義滑鼠樣式,格式:

css:{cursor:url('絕對路徑的圖片(格式:cur,ico)'),-moz-zoom-out;}//FF下面

css:{cursor:url('絕對路徑'),auto;}//IE,FF,chrome瀏覽器都可以

前面url是自定義滑鼠格式,影象的絕對路徑地址,後面的引數是css標準的cursor樣式,(IE下面可以不需要)

圖示的格式根據不同的瀏覽器來分:IE支援cur,ani,ico這三種格式,FF支援bmp,gif,jpg,cur,ico這幾種格式,不支援ani格式,也不支援gif動畫格式,因此來說一般將圖片存為cur或ico格式比較好,如果是ani格式的話,那麼可以在FF下面用jpg,gif,bmp來代替(cursor:url(.....ani),url(.....gif),auto)

還有幾個需要注意的地方:1.圖片地址為絕對路徑,2.圖片大小最好是32*32的大小,反正在各個瀏覽器下面解析的大小不一樣

Cursor:url()的使用:

cursor: url(),pointer;

url:需使用的自定義游標的 URL。圖片型別需要是.cur或.ani格式的。(這次專案中我是用的.ico格式,並沒有發現瀏覽器相容問題)

pointer: 預設的滑鼠游標樣式,當沒有找到可用的定義游標時會使用此游標。

最近專案中有用到設定滑鼠游標為自定義圖片的特效,在使用Cursor:url()的過程中遇到了很多問題。

問題一 瀏覽器不相容問題:

在FF火狐中可以很正常的顯示出來,而在IE中起初是顯示不出來,後來是滑鼠圖片大小過小的問題,在Google瀏覽器中滑鼠圖片的大小問題更加的突出——超級的大。

碰到的情況正好和baidu到的結果相反,很多朋友遇到的問題都是不相容FF瀏覽器。

對於在瀏覽器中滑鼠圖片不顯示的問題,問題大概出在對滑鼠圖片URL路徑的引用上。 可以分別嘗試下絕對和相對路徑的引用。

問題二 各瀏覽器間滑鼠圖片大小不一致問題:

這種問題應該和各瀏覽器間對Cursor圖片的解析有關係,起初我的滑鼠圖片大小是59*56的,後來把滑鼠圖片的尺寸改為32*32後,圖片大小不一致的問題就解決了。

(經測試發現,超過32*32尺寸,就會出現這種問題)

問題三 IE中使用Cursor URL()出現滑鼠閃動問題:

當對設定Cursor URL()的容器元素添加了Title或Alt時,就會出現這種現象。最後很無奈的把Title標籤去掉了。難道是因為在IE中Cursor會和Title、Alt衝突麼?

相關推薦

css Cursor:url()定義滑鼠指標樣式圖片

css自定義滑鼠指標樣式為圖片Cursor:url()的使用,今天在專案中,要用到自定義滑鼠樣式,格式: css:{cursor:url('絕對路徑的圖片(格式:cur,ico)'),-moz-zoom-out;}//FF下面 css:{cursor:url('絕對路徑')

CSS定義滑鼠指標樣式

原文連結: http://davidwalsh.name/css-custom-cursorDemo地址: http://davidwalsh.name/demo/css-custom-cursor.php原文日期: 2014-09-16翻譯日期: 2014-09-17翻譯人

cursor url 定義鼠標樣式

body int 方式 光標 png ctrl 格式 code 背景 cursor可以自定義鼠標寫法是cursor:url(“圖片路徑”),default url:需使用的自定義光標的 URL。圖片類型需要是.cur或.ani格式的。 pointer: 默認的鼠標光標樣

css定義滾動條樣式定義文字選擇樣式,設置文字不被選擇

sed 分享 play gpo radi https cal hid 右移 ::-webkit-scrollbar 滾動條整體部分 ::-webkit-scrollbar-thumb 滾動條裏面的小方塊,能向上向下移動(或往左往右移動,取決於是垂直滾動條還是水平滾動條)

QT如何定義滑鼠樣式及如何用windows帶畫圖工具進行滑鼠樣式的設計

眾所周知,QT系統自身擁有眾多的滑鼠樣式,這些滑鼠樣式均比較常見,顏色、樣式為系統所固有,無法更改。哪麼能不能自定義滑鼠的形狀、顏色等特點呢?答案是可以的。自定義的滑鼠樣式可以隨意指定,顏色更是多種多樣,極具個性化。 QT自帶的滑鼠樣式(在此不做過多介紹): 可以直接拿來用,具體用法如下:

css佈局—直接定義柵格系統,自己新增小型bootstrap樣式

要點: 1.這個例項中的佈局,通過自定義的柵格系統,模仿bootstrap庫,從而做到自己能有自己的庫樣式思路。 2.像background這個屬性,有許多的子屬性,要是想要連寫的話,如背景圖片和平鋪,只需寫image即可,不需要也不能寫成background-image。 效果:

定義滑鼠樣式

效果圖展示: 程式碼 : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="

Qt-Qlabel 定義滑鼠點選事件以及文字樣式效果設計

最近專案中需要實現一個訊息推送的功能,模仿QQ訊息彈窗的方式實現,介面開發的工具為Qt。對桌面應用開發這塊不太熟悉,通過摸索嘗試也算是把這個功能實現了,其中也碰到了一些比較麻煩的問題,這些問題我看也具有一定的普遍性,就把我摸索出來的解決方法和大家分享下(可能有更好的方法我沒

css定義滾動條樣式

/* 自定義滾動條樣式開始 */ #student_unit_div::-webkit-scrollbar {     width:8px;     height:8px; } #student_unit_div::-webkit-scrollbar-track     {

CSS定義滾動條樣式

col http lba dede back 分享 技術 sha spa ::-webkit-scrollbar {/*滾動條整體樣式*/ width: 5px; /*高寬分別對應橫豎滾動條的尺寸*/ height: 1px; } ::-

CSS3定義滾動條樣式 -webkit-scrollbar

play 偽類 thumb area 沒有 :link 現在 自定義滾動條 box ::-webkit-scrollbar {/*隱藏滾輪*/display: none;} 前言 webkit支持擁有overflow屬性的區域,列表框,下拉菜單,textarea的滾動條自定

CSS3定義滾動條樣式 之 -webkit-scrollbar

selection 單獨 窗口 請求 方塊 利用 源碼 bsp 進行 有沒有覺得瀏覽器自帶的原始滾動條很不美觀,同時也有看到很多網站的自定義滾動條顯得高端,就連chrome32.0開發板都拋棄了原始的滾動條,美觀多了。那webkit瀏覽器是如何自定義滾動條的呢? 前言

03.CSS動畫-->定義動畫

pre dev 展示 效果 minimum rect min mat ini <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> &l

Laravel 定義分頁樣式

建立 img each IV com mina nta ner names 操作步驟如下: (1) 對應public/css/paging.css 文件建立分頁樣式. (2) 控制器查出分頁數據使用 paginate函數進行分頁處理.(禁止使用group by處理查詢)

定義滾動條樣式-transition無效

swe 我們 contain not dep bar ray 就是 overflow 問題 需求是自定義滾動條樣式,然後2秒內無操作隱藏滾動條。 2s內隱藏比較麻煩,不能用css實現,只能監聽容器的touch事件,然後給滾動條加個opacity: 0的class。 .cla

定義WPF 視窗樣式

原文: 自定義WPF 視窗樣式 自定義 Window 在客戶端程式中,經常需要用到自定義一個 Window ,大部分是為了好看吧。做了很多研究和實踐之後,覺得需要把這個過程寫下來,以供查閱。 WPF 提供的豐富的功能使得自定義

在.net桌面程式中定義滑鼠游標

原文: 在.net桌面程式中自定義滑鼠游標 有的時候,一個自定義的滑鼠游標能給你的程式增色不少。本文這裡介紹一下如何在.net桌面程式中自定義滑鼠游標。由於.net的桌面程式分為WinForm和WPF兩種,這裡分別介紹一下。 WinForm程式 對於WinForm程式,可以通過修改Control.Cu

Thinkphp5 定義分頁樣式顯示頁碼和數量

原文章地址:http://www.zhaisui.com/article/52.html Thinkphp5 自帶的分頁比較簡單,本文通過修改Bootstrap類自定義顯示分頁的頁碼和數量 一、修改完成後如下圖顯示 二、修改Bootstr

JQuery模擬網頁中定義滑鼠右鍵選單

題外話.......最近在開發一個網站專案的時候,需要用到網頁自定義右鍵選單,在網上看了各路前輩大神的操作,頭暈目眩,為了達到目的,突然靈機一動,於是便有了這篇文章.   先放個效果圖(沾沾自喜,大神勿噴): 廢話不多說,進入正題:   1.首先 我們要禁用掉原網頁中右鍵選單

定義input radio樣式

input[type="radio"]+span::before{ content: "\a0";//不換行空格 display: inline-block; verti