怎么使用CSS改變光標樣式

知識庫

怎么使用CSS改變光標樣式

2023-10-28 16:59


本文將介紹如何使用CSS改變光標樣式

                                            
  
  

當我們在瀏覽網頁時,經常會看到鼠標在不同區域顯示不同樣式的光標,例如箭頭、手形、文本輸入符號等。這些不同的光標樣式可以通過CSS來改變。

要改變光標樣式,我們可以使用以下CSS屬性:

  • cursor: auto;:自動根據元素的類型和上下文來顯示光標樣式。
  • cursor: default;:顯示默認光標樣式(通常是箭頭)。
  • cursor: pointer;:顯示手形光標,表示鏈接或可點擊的元素。
  • cursor: text;:顯示文本輸入符號,表示可輸入文本的區域。
  • cursor: move;:顯示移動光標,表示可拖動的元素。
  • cursor: not-allowed;:顯示不允許光標,表示禁用的元素。

除了以上常用的光標樣式外,還可以使用自定義的光標樣式,例如圖片、矢量圖等。

要使用自定義的光標樣式,可以先準備好一個光標文件(通常是一個.cur或.ico文件),然后通過CSS設置如下:

cursor: url("custom-cursor.cur"), auto;

在上面的代碼中,url("custom-cursor.cur")是光標文件的路徑,auto是備用的光標樣式,當加載光標文件失敗時會顯示備用樣式。

總結一下,使用CSS改變光標樣式可以通過設置cursor屬性來實現,可以使用預定義的樣式,也可以使用自定義的光標文件。


label :
  • CSS
  • 光標樣式
  • 改變光標樣式