搜索
SR網頁設計工作室 - 購物網站/企業官網專業開發 HTML/CSS 語法 css: cursor 定義滑鼠游標屬性 (常見cursor屬性一覽表) ...
byadmin 發表於 2015-7-15 16:15:56 , 8187人已閱讀 , 0人回應

平常瀏覽器對於鼠標都有個預設值在 , 例如超連結會變成手指狀 , 移動到輸入欄位會變成 I 狀 , 可以拉動的會變成 十字狀 , 其實這些滑鼠樣貌屬性 , 只要使用CSS中的 cursor屬性我們就可以拿來自由運用 ! 下方提供常用的滑鼠狀態列表 , 大家可以將滑鼠移動上去參考效果 .


若是要讓鼠標顯示為指定的圖示,可採用下方語法

{ cursor: url(圖案網址); }

一般滑鼠狀態一覽表

CSS 樣式滑鼠顯示效果(鼠標移動至下方文字上)
{ cursor: crosshair; }
滑鼠游標圖案是 crosshair
{ cursor: pointer; }
滑鼠游標圖案是 pointer
{ cursor: text; }
滑鼠游標圖案是 text
{ cursor: move; }
滑鼠游標圖案是 move
{ cursor: wait; }
滑鼠游標圖案是 wait
{ cursor: help; }
滑鼠游標圖案是 help
{ cursor: progress; }
滑鼠游標圖案是 progress
{ cursor: not-allowed; }
滑鼠游標圖案是 not-allowed
{ cursor: no-drop; }
滑鼠游標圖案是 no-drop
{ cursor: no-vertical-text; }
滑鼠游標圖案是 no-vertical-text
{ cursor: all-scroll; }
滑鼠游標圖案是 all-scroll
{ cursor: col-resize; }
滑鼠游標圖案是 col-resize
{ cursor: row-resize; }
滑鼠游標圖案是 row-resize
{ cursor: e-resize; }
滑鼠游標圖案是 e-resize
{ cursor: ne-resize; }
滑鼠游標圖案是 ne-resize
{ cursor: n-resize; }
滑鼠游標圖案是 n-resize
{ cursor: nw-resize; }
滑鼠游標圖案是 nw-resize
{ cursor: w-resize; }
滑鼠游標圖案是 w-resize
{ cursor: sw-resize; }
滑鼠游標圖案是 sw-resize
{ cursor: s-resize; }
滑鼠游標圖案是 s-resize
{ cursor: se-resize; }
滑鼠游標圖案是 se-resize
cursors.png
Traffic Exchange Site
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

文章分類

SR數位設計工作室

  • 服務專線:03-3555-069


ECSHOP購物網站開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱:sr.design2011@gmail.com

, Processed in 0.168237 second(s), 43 queries , Gzip On.

Copyright © 2011-2014 Template By SR網頁設計清新部落風格

Core - DZ2.5 GMT+8, 2024-3-28 18:04

回頂部