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格式。