用CSS改變網頁滑鼠的樣式

一般人對Windows各種滑鼠樣式一定不陌生。而在網頁上往往只有超連結上才出現一個手形，在其它地方似乎沒什麼變化。這和網頁上充滿動感的設計顯得不怎麼和諧。 
實際上，用CSS可以方便地定義許多種滑鼠形狀。用本文介紹的方法，可以在網頁的任何地方設置滑鼠的不同樣式。 

在Dreamweaver中設置手形滑鼠樣式效果的製作步驟：
1、按F7調出CSS面板，選擇“none”，再點擊面板下部的編輯圖示，在彈出的“Edit Style Sheet”對話方塊上按“New”按鈕，在彈出的“New Style”對話方塊中選擇“Make Custom Style (class)”後，在下面的“Name”輸入框中輸入“.cursor1”(也就是給要定義的class取個名字，注意前面那個小點不要漏了），按OK，立即彈出“Style Definition for .cursor1”對話方塊（如下圖所示），這時就可定義CSS的“.cursor1”了。 

2、在“Style Definition for .cursor1”對話方塊左邊的選擇視窗中選擇“Extensions”，在右邊的面板上定義（也是選擇）“Cursor”屬性，本例是要求滑鼠的形狀變為手形，所以點擊那個三角形按鈕，在拉出的滑鼠樣式清單中選擇“hand”，如上圖所示。 

3、按OK按鈕返回“Edit Style Sheet”對話方塊，按“Done”按鈕，CSS就做好了。在網頁原始程式碼的〈head〉 與〈/head〉之間見到的CSS代碼是這樣的：
〈style type="text/css"〉
〈!--
.cursor1 { cursor: hand}
--〉
〈/style〉
對於不是使用Dreamweaver的網友，直接把上述代碼複製在〈head〉與〈/head〉之間，產生的效果相同。 

4、選擇一段文本或圖像，點一下CSS面板上的“.cursor1”就行了。按F12，把滑鼠移到那段載入了改變滑鼠樣式CSS的地方，滑鼠就會變為手形。對於不是使用Dreamweaver的網友，需把class="cursor"加到網頁的原始程式碼中去才行。

若要把滑鼠改變成其它形狀，只要在第二步中定義“cursor”屬性時選擇不同的樣式就行了。各屬性值的含義如下：
crosshair：精確定位“十”字形； text：文本“I”形； wait：等待，“沙漏”形；default：默認指針； help：幫助，帶尾箭頭； e-resize：箭頭朝右方； ne-resize：箭頭朝右上方； n-resize：箭頭朝上方； nw-resize：箭頭朝左上方； w-resize：箭頭朝左方； sw-resize：箭頭朝左下方； s-resize：箭頭朝下方； se-resize箭頭朝右下方； auto：自動，滑鼠按照預設的狀態根據頁面上的元素自行改變樣式。 

瞭解了上述屬性值的含義，滑鼠的形狀就在你的掌握之中了，需要讓滑鼠在那裡變為什麼形狀，只要重複上面的操作就行了。要注意的是：一次只能定義一種滑鼠樣式，若在一個頁面上使用多種樣式的滑鼠圖形，要定義多個“class"，用時選擇載入。