巧妙運用CSS立刻改變鼠標的樣式

2024-07-11 08:24:45

字體：大中小

來源：轉載

供稿：網友

　　用慣了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代碼是這樣的：
〈styletype="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：自動，鼠標按照默認的狀態根據頁面上的元素自行改變樣式。

上一篇：小技巧:網頁制作中段落縮進的方法

下一篇：CSS讓網頁里的提交按鈕變得更漂亮