HTML光標樣式


HTML光標樣式

把你的光標放到相應文字上鼠標顯示效果 
 cursor:auto;   自動
 cursor:zoom-in;   放大鏡
 cursor:zoom-out;   縮小鏡
 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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM