首頁 > web前端 > html教學 > HTML遊標樣式

HTML遊標樣式

WBOY
發布: 2016-08-08 08:49:49
原創
2258 人瀏覽過

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>
登入後複製

 

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板