HTML游標樣式 cursor:url('#');#為游標文件地址 (註意文件格式必須為:.cur或.ani) 用戶自定義(可用動畫) 註意:在定義完自定義的游標之後在末尾加上一般性的游標, 以防那些url所定義的游標不能使用 說明: cursor 屬性:設置顯示的游標的類型(形狀)。 此屬性的值可 ...
HTML游標樣式
cursor:auto; | 自動 |
cursor:all-scroll; | 上下左右任何方向滾動 |
cursor:crosshair; | 十字準心 |
cursor:pointer; | 手 |
cursor:wait; | 等待 |
cursor:help; | 幫助 |
cursor:no-drop; | 無法釋放 |
cursor:text; | 文字/編輯 |
cursor:move; | 可移動對象 |
cursor:vertical-text; | 可編輯的垂直文本的游標 |
cursor:n-resize; | 向上改變大小(North) |
cursor:s-resize; | 向下改變大小(South) |
cursor:e-resize; | 向右改變大小(East) |
cursor:w-resize; | 向左改變大小(West) |
cursor:ne-resize; | 向上右改變大小(North East) |
cursor:nw-resize; | 向上左改變大小(North West) |
cursor:se-resize; | 向下右改變大小(South East) |
cursor:sw-resize; | 向下左改變大小(South West) |
cursor:col-resize; | 可被水平改變尺寸 |
cursor:row-resize; | 可被垂直改變尺寸 |
cursor:not-allowed; | 禁止 |
cursor:progress; | 處理中 |
cursor:default; | 系統預設 |
cursor:url('#');#為游標文件地址 (註意文件格式必須為:.cur或.ani) |
用戶自定義(可用動畫) 註意:在定義完自定義的游標之後在末尾加上一般性的游標, 以防那些url所定義的游標不能使用 |
說明:
cursor 屬性:設置顯示的游標的類型(形狀)。
此屬性的值可以是多個,其間要用逗號分隔;
假如第一個值無法找到而不能被顯示,則第二個值將被嘗試使用,依此類推;
假如全部值都不可用的話,則此屬性不會發生作用,游標也不會被改變。
比如:{cursor:pointer,wait,help;},從pointer到wait,再到help,如果都沒被應用,則cursor屬性不起任何作用。
現在舉一個“手”游標的例子,寫法有兩種:
效果圖:
cursor:pointer; | 手 |
第一種是行內樣式:(行內樣式:將CSS樣式編寫在標簽之中)
<table border="1"> <tr class="pointer" style="cursor:pointer;"> <td>cursor:pointer;</td> <td>手</td> </tr> </table>
第二種是內部樣式:(內部樣式:由<style>標簽定位在<head>之中)
<!-- 這裡是style裡面的內容 --> <style type="text/css"> .pointer:hover{ cursor:pointer; } </style> <!-- 這裡是body裡面的內容 --> <body> <table border="1"> <tr class="pointer"> <td>cursor:pointer;</td> <td>手</td> </tr> </table> </body>