在css中改變光標(biāo)樣式的方法

小編給大家分享一下在css中改變光標(biāo)樣式的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

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：需使用的自定義光標(biāo)的 URL。注：請(qǐng)?jiān)诖肆斜淼哪┒耸冀K定義一種普通的光標(biāo)，以防沒有由 URL 定義的可用光標(biāo)。

●　default：默認(rèn)光標(biāo)（通常是一個(gè)箭頭）

●　auto：默認(rèn)。瀏覽器設(shè)置的光標(biāo)。

●　crosshair：光標(biāo)呈現(xiàn)為十字線。

●　pointer：光標(biāo)呈現(xiàn)為指示鏈接的指針（一只手）

●　move：此光標(biāo)指示某對(duì)象可被移動(dòng)。

●　e-resize：此光標(biāo)指示矩形框的邊緣可被向右（東）移動(dòng)。

●　ne-resize：此光標(biāo)指示矩形框的邊緣可被向上及向右移動(dòng)（北/東）。

●　nw-resize：此光標(biāo)指示矩形框的邊緣可被向上及向左移動(dòng)（北/西）。

●　n-resize：此光標(biāo)指示矩形框的邊緣可被向上（北）移動(dòng)。

●　se-resize：此光標(biāo)指示矩形框的邊緣可被向下及向右移動(dòng)（南/東）。

●　sw-resize：此光標(biāo)指示矩形框的邊緣可被向下及向左移動(dòng)（南/西）。

●　s-resize：此光標(biāo)指示矩形框的邊緣可被向下移動(dòng)（北/西）。

●　w-resize：此光標(biāo)指示矩形框的邊緣可被向左移動(dòng)（西）。

●　text：此光標(biāo)指示文本。

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

●　help：此光標(biāo)指示可用的幫助（通常是一個(gè)問號(hào)或一個(gè)氣球）。

常用cursor光標(biāo)說明

1、div{ cursor:default }默認(rèn)正常鼠標(biāo)指針

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

3、div{ cursor:move } 移動(dòng)選擇效果

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

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

cursor樣式效果圖

鼠標(biāo)指針說明

cursor設(shè)置或檢索在對(duì)象上移動(dòng)的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀。

控制設(shè)置鼠標(biāo)指針樣式是比較常用的，但光標(biāo)切記勿濫用，也不要輕易設(shè)置自定義圖片為鼠標(biāo)樣式這樣會(huì)將網(wǎng)頁造成復(fù)雜與不符合用戶體驗(yàn)感覺，切記光標(biāo)慎用。

以上是在css中改變光標(biāo)樣式的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！