CSS變小手全面解析

一、CSS小手的代碼

最簡單的CSS小手的代碼如下：

cursor: pointer;

這個代碼能夠讓鼠標的光標變成小手，通常用在鼠標將會與鏈接、按鈕或可以點擊的元素交互的情況下。 如果您想讓所選元素在懸停時更改到不同的光標類型，可以按照下面的要求做進一步設置。

二、CSS怎麼讓鼠標變小手

其實比起問“怎麼讓鼠標變小手”，我們應該問“在什麼情況下讓鼠標變小手”。依據不同的交互情況，我們需要選擇不同的CSS樣式，以使得鼠標在不同情況下都變成小手。
常見的情況有：指向鏈接、懸停在可點擊的元素上以及拖動元素。 這些情況分別需要使用不同的CSS樣式來改變鼠標樣式：

1. 指向鏈接

需要讓鼠標指向鏈接時變成小手。這個我們可以用上述提到的最簡單的CSS小手的代碼實現。

2. 懸停在可點擊的元素上

需要讓鼠標懸停在可點擊的元素上時變成小手。這個可以這樣實現：

.element:hover {
  cursor: pointer;
}

3. 拖動元素

需要讓鼠標在拖動元素時如何處理？可以使用這種樣式：

.element {
  cursor: move;
}

三、CSS小手樣式

雖然我們已經提到了最簡單的CSS樣式的代碼，但是，我們需要定製樣式，從而使得小手符合使用情景。如下是一些不同的CSS小手樣式：

1. 指向鏈接

a {
  cursor: pointer;
}

2. 懸停在可點擊的元素上，如按鈕

button:hover {
  cursor: pointer;
}

3. 拖動元素

.element {
  cursor: move;
}

4. 文本樣式

有時候我們想在文本上定製小手，我們可以使用以下代碼來實現。

p {
  cursor: text;
}

四、CSS箭頭變小手

在一些特殊場合下，應用箭頭小手的效果會更好。比如在需要向上或向下滾動頁面時、選擇文本區塊或遞增操作時都可以應用箭頭小手效果。

以下是一些常用的CSS箭頭小手樣式：

1. 向右箭頭小手

.arrow {
  cursor: e-resize;
}

2. 向上箭頭小手

.arrow {
  cursor: n-resize;
}

3. 向下箭頭小手

.arrow {
  cursor: s-resize;
}

4. 向左箭頭小手

.arrow {
  cursor: w-resize;
}

五、CSS指針變小手

有時候我們需要讓光標在懸停在圖像、視頻中時變成小手，這個時候可以使用指針小手。簡易例子如下：

img:hover {
  cursor: pointer;
}

六、鼠標經過變小手CSS

在網站中經常需要用到鼠標經過變小樣式的CSS，這個可以通過:hover進行設置如下所示：

a:hover {
  cursor: pointer;
}

七、CSS懸浮小手

CSS懸浮小手和經過變小手樣式類似，只是經常應用在按鈕或類似的元素上，用來提升用戶體驗。 例如：

1. 單行鏈接

a {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

a:hover {
  color: #fff;
  background-color: #007bff;
}

2. 按鈕

.btn {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.btn:hover {
  background-color: #007bff;
  border: 2px solid #007bff;
  color: #fff;
}

八、 CSS鼠標小手樣式

最後，我們來看一下更具有實用意義的！如果您需要特定的鼠標小手樣式，可以使用以下代碼。

1. 拇指小手

.thumb {
  cursor: url('path/to/thumb-cursor.png'), auto;
}

2. 自定義圖標

.custom {
  cursor: url('path/to/cursor.png') 25 50, auto;
}

但是需要注意的是：以下瀏覽器僅支持png、cur和ico格式。