巧妙運用CSS樣式表立刻改變鼠標(biāo)的樣式

用慣了Windows的人對各種各樣的鼠標(biāo)樣式一定不會陌生。當(dāng)鼠標(biāo)移動到不同的地方時，當(dāng)鼠標(biāo)執(zhí)行不同的功能時，當(dāng)系統(tǒng)處于不同的狀態(tài)時，都會使鼠標(biāo)的形狀發(fā)生變化。而在網(wǎng)頁上往往只有當(dāng)鼠標(biāo)在超級鏈接上時才出現(xiàn)一個手形，在其它地方似乎沒有什么變化。這同充滿動感的網(wǎng)頁顯得不怎么和諧。實際上，用CSS可以方便地定義許多種鼠標(biāo)形狀。用本文介紹的方法，可以在網(wǎng)頁的作何地方設(shè)置鼠標(biāo)的不同樣式。 在Dreamweaver3中設(shè)置手形鼠標(biāo)樣式效果的制作步驟： 1、按F7（或點擊快速啟動欄里那個象“八卦圖”似的圖標(biāo)），調(diào)出CSS面板，選擇“none”，再點擊面板下部的編輯圖標(biāo)，在彈出的“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”屬性，本例是要求鼠標(biāo)的形狀變?yōu)槭中危渣c擊那個三角形按鈕，在拉出的鼠標(biāo)樣式列表中選擇“hand”，如上圖所示。 3、按OK按鈕返回“Edit Style Sheet”對話框，按“Done”按鈕，CSS就做好了。在網(wǎng)頁源代碼的〈head〉 與〈/head〉之間見到的CSS代碼是這樣的： 〈style type="text/css"〉 〈!-- .cursor1 { cursor: hand} --〉 〈/style〉 對于不是使用Dreamweaver3的網(wǎng)友，直接把上述代碼復(fù)制在〈head〉與〈/head〉之間，產(chǎn)生的效果相同。 4、選擇一段文本或圖象，點一下CSS面板上的“.cursor1”就行了。按F12，把鼠標(biāo)移到那段加載了改變鼠標(biāo)樣式CSS的地方，鼠標(biāo)就會變?yōu)槭中?。對于不是使用Dreamweaver3的網(wǎng)友，需把class="cursor"加到網(wǎng)頁的源代碼中去才行。 若要把鼠標(biāo)改變成其它形狀，只要在第二步中定義“cursor”屬性時選擇不同的樣式就行了。各屬性值的含義如下： crosshair：精確定位“十”字形； text：文本“I”形； wait：等待，“沙漏”形；default：默認(rèn)指針； help：幫助，帶尾箭頭； e-resize：箭頭朝右方； ne-resize：箭頭朝右上方； n-resize：箭頭朝上方； nw-resize：箭頭朝左上方； w-resize：箭頭朝左方； sw-resize：箭頭朝左下方； s-resize：箭頭朝下方； se-resize箭頭朝右下方； auto：自動，鼠標(biāo)按照默認(rèn)的狀態(tài)根據(jù)頁面上的元素自行改變樣式。 了解了上述屬性值的含義，鼠標(biāo)的形狀就在你的掌握之中了，需要讓鼠標(biāo)在那里變?yōu)槭裁葱螤?，只要重?fù)上面的操作就行了。要注意的是：一次只能定義一種鼠標(biāo)樣式，若在一個頁面上使用多種樣式的鼠標(biāo)圖形，要定義多個“class"，用時選擇加載。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

分享名稱：巧妙運用CSS樣式表立刻改變鼠標(biāo)的樣式
文章轉(zhuǎn)載：http://www.muchs.cn/news0/314800.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、企業(yè)網(wǎng)站制作、網(wǎng)站排名、ChatGPT、Google、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)