Flycan 飛肯設計學苑:教學網站


【CSS 語法】文章精華區


【教學】 【CSS語法】 改變滑鼠游標的形狀



【CSS語法】 改變滑鼠游標的形狀
飛肯老師
註冊日期:
2008/2/24 18:28
留言: 1330
離線
【CSS語法】 改變滑鼠游標的形狀

當滑鼠移到圖片或文字上面時,可以改變滑鼠游標的形狀~


範例預覽: http://www.flycan.com/flycancss/cursor.htm


1. 樣式部份設定如下:
<style type="text/css">

<!--

.myMOUSE {

cursor: help;

}

-->

</style>


2. 網頁中文字或圖片部份設定如下:

<div class="myMOUSE">

文字內容...文字內容...文字內容...文字內容...文字內容...

</div>




如下圖所示~滑鼠碰到文字內容時,滑鼠游標就會變成問號的形狀~
Open in new window

2008/3/8 17:59
 


回復: 【CSS語法】 改變滑鼠游標的形狀
飛肯老師
註冊日期:
2008/2/24 18:28
留言: 1330
離線
cursor: help; 滑鼠游標會變成「問號」的形狀~

cursor: crosshair; 滑鼠游標會變成「十字」的形狀~


cursor: pointer; 滑鼠游標會同時出現原來的游標加上文字編輯時的「I」的形狀~


cursor: text; 滑鼠游標會變成文字編輯時的「I」的形狀~


cursor: move; 滑鼠游標會變成「移動十字箭頭」的形狀~


cursor: wait; 滑鼠游標會變成「沙漏」的形狀~


cursor: n-resize; 滑鼠游標會變成「向上箭頭」的形狀~


cursor: s-resize; 滑鼠游標會變成「向下箭頭」的形狀~


cursor: w-resize; 滑鼠游標會變成「向左箭頭」的形狀~


cursor: e-resize; 滑鼠游標會變成「向右箭頭」的形狀~


cursor: ne-resize; 滑鼠游標會變成「向右上箭頭」的形狀~


cursor: nw-resize; 滑鼠游標會變成「向左上箭頭」的形狀~


cursor: se-resize; 滑鼠游標會變成「向右下箭頭」的形狀~


cursor: sw-resize; 滑鼠游標會變成「向左下箭頭」的形狀~

2008/3/8 18:02
 


回覆: 回復: 【CSS語法】 改變滑鼠游標的形狀
會員一級
註冊日期:
2009/3/11 17:23
留言: 2
離線
想不到…想不到!css竟然可以做到如此效果!
感恩

2009/3/11 17:52
 




正在瀏覽:   1 名訪客






[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 1 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

http://www.flycan.com.tw/ 電腦設計教學中心

【 Flycan.com 】 Powered by XOOPS