HTML遊標樣式

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樣式寫在標籤之中）

<span style="color: #0000ff;"><</span><span style="color: #800000;">table </span><span style="color: #ff0000;">border</span><span style="color: #0000ff;">="1"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">tr </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="pointer"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="cursor:pointer;"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>cursor:pointer;<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>手<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">table</span><span style="color: #0000ff;">></span>

 第二種是內部樣式：（內部樣式：由

<span style="color: #008000;"><!--</span><span style="color: #008000;"> 这里是style里面的内容 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
.pointer:hover</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        cursor</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">pointer</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>

<span style="color: #008000;"><!--</span><span style="color: #008000;"> 这里是body里面的内容 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">table </span><span style="color: #ff0000;">border</span><span style="color: #0000ff;">="1"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">tr </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="pointer"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>cursor:pointer;<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>手<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">table</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>