一、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格式。
原创文章，作者：VKUD，如若转载，请注明出处：https://www.506064.com/n/132881.html
微信扫一扫 
支付宝扫一扫 