如何在css中改變光標樣式

這篇文章給大家分享的是有關如何在css中改變光標樣式的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

　


　在css中cursor屬性是用來定義了鼠標指針放在一個元素邊界范圍內時所用的光標形狀；我們可以通cursor屬性來設置鼠標光標（指針）樣式。

　　cursor屬性的語法：

　　cursor:auto|crosshair|default|hand|move|help|wait|text|w-resize|s-resize|n-resize|e-resize|ne-resize|sw-resize|se-resize|nw-resize|pointer|url(url)

　　可能的屬性值：

　　●url：需使用的自定義光標的URL。注：請在此列表的末端始終定義一種普通的光標，以防沒有由URL定義的可用光標。

　　●default：默認光標（通常是一個箭頭）

　　●auto：默認。瀏覽器設置的光標。

　　●crosshair：光標呈現為十字線。

　　●pointer：光標呈現為指示鏈接的指針（一只手）

　　●move：此光標指示某對象可被移動。

　　●e-resize：此光標指示矩形框的邊緣可被向右（東）移動。

　　●ne-resize：此光標指示矩形框的邊緣可被向上及向右移動（北/東）。

　　●nw-resize：此光標指示矩形框的邊緣可被向上及向左移動（北/西）。

　　●n-resize：此光標指示矩形框的邊緣可被向上（北）移動。

　　●se-resize：此光標指示矩形框的邊緣可被向下及向右移動（南/東）。

　　●sw-resize：此光標指示矩形框的邊緣可被向下及向左移動（南/西）。

　　●s-resize：此光標指示矩形框的邊緣可被向下移動（北/西）。

　　●w-resize：此光標指示矩形框的邊緣可被向左移動（西）。

　　●text：此光標指示文本。

　　●wait：此光標指示程序正忙（通常是一只表或沙漏）。

　　●help：此光標指示可用的幫助（通常是一個問號或一個氣球）。

　　常用cursor光標說明

　　1、div{cursor:default}默認正常鼠標指針

　　2、div{cursor:hand}和div{cursor:text}文本選擇效果

　　3、div{cursor:move}移動選擇效果

　　4、div{cursor:pointer}手指形狀鏈接選擇效果

　　5、div{cursor:url(url圖片地址)}設置對象為圖片

　　鼠標指針說明

　　cursor設置或檢索在對象上移動的鼠標指針采用何種系統預定義的光標形狀。

　　控制設置鼠標指針樣式是比較常用的，但光標切記勿濫用，也不要輕易設置自定義圖片為鼠標樣式這樣會將網頁造成復雜與不符合用戶體驗感覺，切記光標慎用。

感謝各位的閱讀！關于“如何在css中改變光標樣式”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！