CSS改網頁滑鼠指標、改指定元素指標（1）——代碼部分，css滑鼠指標

CSS改網頁滑鼠指標、改指定元素指標（1）——代碼部分，css滑鼠指標

要實現CSS改網頁滑鼠指標、改指定元素指標，我們應該首先瞭解以下內容：

所有主流瀏覽器都支援 cursor 屬性。
注釋：Opera 9.3 和 Safari 3 不支援 url 值。
注釋：任何版本的 Internet Explorer （包括 IE8）都不支援屬性值 "inherit"。
定義和用法
cursor 屬性規定要顯示的游標的類型（形狀）。
該屬性定義了滑鼠指標放在一個元素邊界範圍內時所用的游標形狀（不過 CSS2.1 沒有定義由哪個邊界確定這個範圍）。
 

  

   

    
預設值：
    
auto
   
   

    
繼承性：
    
yes
   
   

    
版本：
    
CSS2
   
   

    
JavaScript 文法：
    
object.style.cursor="crosshair"（可見js也可以改指標，不過選擇css更加方便）
   
  
 
可能的值
 

  

   

    
值
    
描述
   
   

    
url
    
需使用的自訂游標的 URL。
注釋：請在此列表的末端始終定義一種普通的游標，以防沒有由 URL 定義的可用游標。
   
   

    
default
    
預設游標（通常是一個箭頭）
   
   

    
auto
    
預設。瀏覽器設定的游標。
   
   

    
crosshair
    
游標呈現為十字線。
   
   

    
pointer
    
游標呈現為指示連結的指標（一隻手）
   
   

    
move
    
此游標指示某對象可被移動。
   
   

    
e-resize
    
此游標指示矩形框的邊緣可被向右（東）移動。
   
   

    
ne-resize
    
此游標指示矩形框的邊緣可被向上及向右移動（北/東）。
   
   

    
nw-resize
    
此游標指示矩形框的邊緣可被向上及向左移動（北/西）。
   
   

    
n-resize
    
此游標指示矩形框的邊緣可被向上（北）移動。
   
   

    
se-resize
    
此游標指示矩形框的邊緣可被向下及向右移動（南/東）。
   
   

    
sw-resize
    
此游標指示矩形框的邊緣可被向下及向左移動（南/西）。
   
   

    
s-resize
    
此游標指示矩形框的邊緣可被向下移動（南）。
   
   

    
w-resize
    
此游標指示矩形框的邊緣可被向左移動（西）。
   
   

    
text
    
此游標指示文本。
   
   

    
wait
    
此游標指示程式正忙（通常是一隻表或沙漏）。
   
   

    
help
    
此游標指示可用的協助（通常是一個問號或一個氣球）。
   
  
 

以上的內容來自w3c，已經非常詳細了，但博主在實踐過程中，總結出這麼幾點：

1.css文法：

element {
//element可以換成所有可能的元素以實現更改指定元素的指標        cursor:kind;
//kind可以替換成上面“可能的值”一表中的所有值（除url）以外}

2.cursor的url值→實現自訂樣式

1 body {2        cursor:url("任何可以的.ico、.ani、.cur或其他圖片地址"),auto;3 }

",auto"是必要的以防url地址不可用，丟失這個參數會導致不以尋找的bug

ok，這個代碼已經可以實現網頁的指標被改變。

3.更加真實的指標

1 a:hover {2        cursor:url("任何可以的.ico、.ani、.cur或其他圖片地址最好與上面不同"),auto;3 }

這將可以實現滑鼠指向串連時指標變化，更接近在作業系統中一樣。

很簡單？快試試吧！我的下篇博文將教大家自繪自己的指標，不過會過一段時間哦，想學的話就關注我哦！

ヾ(◍°∇°◍)ﾉﾞ

自在獨行——在風花雪月裡獨行看人生，喜歡這篇博文就點點贊吧或者點擊右側分享按鈕分享一下吧！哪怕評論一下也好的呀/無奈/無奈