CSS 語法「cursor 屬性」改變滑鼠游標的形狀【飛肯設計】

CSS 語法「cursor 屬性」改變滑鼠游標的形狀

CSS 語法裡面有一個還滿好玩的功能「cursor 屬性」可以改變滑鼠游標的形狀，設定在文字或圖片上面，當滑鼠移上去時，就可以看到滑鼠游標的形狀~

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

CSS 語法寫法如下 ↓

.myMOUSE {
    cursor: help;
}

套用在 <div> 上面寫法如下 ↓

&lt;divdiv class="myMOUSE"&gt;
    文字內容文字內容文字內容文字內容文字內容文字內容文字內容文字內容文字...
&lt;/div&gt;

其他的「cursor 屬性」功能如下：

滑鼠游標摸上去就可以看到喔！

.myMOUSE{ cursor: auto; }

.myMOUSE{ cursor: crosshair; }

.myMOUSE{ cursor: default; }

.myMOUSE{ cursor: e-resize; }

.myMOUSE{ cursor: help; }

.myMOUSE{ cursor: move; }

.myMOUSE{ cursor: n-resize; }

.myMOUSE{ cursor: ne-resize; }

.myMOUSE{ cursor: nw-resize; }

.myMOUSE{ cursor: pointer; }

.myMOUSE{ cursor: progress; }

.myMOUSE{ cursor: s-resize; }

.myMOUSE{ cursor: text; }

.myMOUSE{ cursor: w-resize; }

.myMOUSE{ cursor: wait; }

.myMOUSE{ cursor: inherit; }

參考資料 w3schools 「CSS cursor Property」

當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！

關於「姜智豪老師」

於 1996 年開始從事網頁設計工作 20 多年，參與設計過許多網站專案的開發，一直熱衷網頁設計工作至今。從 1998 年開始從事教學工作，對於網頁設計教學有相當高的熱忱，於 2006 年創立飛肯設計學苑。主要專長 Photoashop、 HTML、CSS、RWD、JavaScript、jQuery 等網頁技術，對於 SEO 優化搜尋引擎排名提昇，以及 Instructional Design 教學專案設計亦有深入的研究。

CSS 語法「cursor 屬性」改變滑鼠游標的形狀

CSS 語法寫法如下 ↓

套用在 <div> 上面寫法如下 ↓

關於「姜智豪 老師」

熱門的文章

關於「姜智豪老師」