改變滑鼠游標圖片的語法(全)
:使用自訂的的游標圖片
:改變網頁游標為自訂游標圖片的方法
<style type="text/css"> <!-- body{ cursor:url("游標網址");} --> </style> |
||
將上面的語法修改相關內容後貼在網頁原始碼的<head>與</head>間
<style>
<!--
BODY{
cursor:url("http://www.freewebs.com/eting1/001.ani");
}
-->
</style>
:改變部落格或留言板游標為自訂游標圖片的方法
cursor:url("游標網址"); | ||
*改變整個Blogg或留言板裡的游標圖案:
在CSS中找到 body{將語法貼在這裡}
*改變Blog或留言板裡滑鼠移至連結時的游標圖案:
在CSS中找到 a: hover {將語法貼在這裡}
*改變整個Blog或留言板的游標:
body{cursor:url("http://www.freewebs.com/eting1/001.ani");
}*Blog或留言板裡滑鼠移至連結時的游標:
a: hover{cursor:url("http://www.freewebs.com/eting1/010.ani");
}
:改變網頁特定連結的游標 圖片
<a style="cursor: url('游標網址')" href="連結網址">連結名稱</a> | ||
將上面的語法修改相關內容後貼在網頁原始碼的<body>與</body>間
<a style="cursor: url('http://www.freewebs.com/eting1/001.ani')" href="http://popo516.myweb.hinet.net">最愛家駒</a>
:使用系統的游標圖片
:將滑鼠移到文字上就會看見範例
- hand:手形
- crosshair:精確定位「十」字形
- text:文本「I」形
- wait:等待,「沙漏」形
- default:預設箭頭
- help:幫助,帶尾箭頭
- e-resize:箭頭朝右方
- ne-resize:箭頭朝右上方
- n-resize:箭頭朝上方
- nw-resize:箭頭朝左上方
- w-resize:箭頭朝左方
- sw-resize:箭頭朝左下方
- s-resize:箭頭朝下方
- se-resize:箭頭朝右下方
- auto:自動,鼠標按照默認的狀態根據頁面上的元素自行改變樣式
- no-drop:出現帶有「禁止標示」的手形游標。原本是用來表示被拖曳的對象不容許在游標目前的位置被放下。
- not-allowed:出現「禁止標示」的游標。原本是用來表示請求的作業不容許被執行。
- pointer:與 hand 相同。
- progress:出現帶有沙漏標示的箭頭游標。原本是用來表示一件工作正在被執行中。
- row-resize:出現上下兩個箭頭,中間由橫線分隔開的游標。原本是用來表示專案或標題欄可以被垂直改變尺寸。
- all-scroll:出現上下左右四個箭頭,中間有一個圓點的游標。原本是用來表示頁面可以向上下左右任何方向捲動。
- col-resize:出現左右兩個箭頭,中間由豎線分隔開的游標。原本是用來表示專案或標題欄可以被水平改變尺寸。
- vertical-text:出現表示可編輯之垂直純文字的游標(通常是大寫字母 I 旋轉 90 度的形狀)。
- move:出現十字箭頭游標。原本是用來表示對象可被移動。
- url('游標圖檔所在的 URL'):以自選的圖檔做為游標外觀。需使用絕對或相對的 URL,來指定游標圖檔所在的位址(圖檔的副檔名 須為 .cur 或 .ani)。
:改變網頁游標為系統游標圖片的方法
<style type="text/css"> <!-- body{cursor: 游標樣式;} --> </style> |
||
將上面的語法修改相關內容後貼在網頁原始碼的<head>與</head>間
<style type="text/css">
<!--
body{cursor: move;}
-->
</style>
:改變部落格或留言板游標為系統游標圖片的方法
cursor: 游標樣式; | ||
*改變整個Blog或留言板裡的游標圖案:
在CSS中找到 body{將語法貼在這裡}
*改變Blog或留言板裡滑鼠移至連結時的游標圖案:
在CSS中找到 a: hover {將語法貼在這裡}
*改變整個Blog或留言板的游標:
body{cursor: move;}
*Blog或留言板裡滑鼠移至連結時的游標:
a: hover{cursor: move;}