CSS自定义鼠标样式，图片，手型等

六月初六月初 HTML 2018-12-27 10:42:36

鼠标样式自定义，通常出现在一些特定的区域上。如：图片放大，那么鼠标移动到图片上则需要呈现出放大的样式。

那么具体的实现代码是如何呢？鼠标的样式我们需要如何自定义呢？

关于鼠标自定义，有对应的属性cursor；该属性自带了一部分常用的鼠标样式，对于那些特殊需求的，也给出了可以自定义图片的方法：

cursor:url(https://www.xuexiareas.com/upload/sixhead.jpg),auto;

上方便是自定义操作方法：

    第一个属性为你需要呈现的图片（注尺寸应该合适！）

    第二个属性为定义的该属性自带的鼠标样式，防止url没有定义的可用光标

常用鼠标样式归整：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<style>
			.set{
				cursor:url(https://www.xuexiareas.com/upload/sixhead.jpg),auto;
			}
 		</style>
		<h3 class="set">自定义图片（六月初博客站）</h3>
		<h3 style="cursor: default;">默认光标（通常是一个箭头）</h3>
		<h3 style="cursor: crosshair;">光标呈现为十字线。</h3>
		<h3 style="cursor: pointer;">一只手</h3>
		<h3 style="cursor: move;">此光标指示某对象可被移动。</h3>
		<h3 style="cursor: e-resize;">此光标指示矩形框的边缘可被向右（东）移动。</h3>
		<h3 style="cursor: ne-resize;">此光标指示矩形框的边缘可被向上及向右移动（北/东）</h3>
		<h3 style="cursor: nw-resize;">此光标指示矩形框的边缘可被向上及向左移动（北/西）</h3>
		<h3 style="cursor: n-resize;">此光标指示矩形框的边缘可被向上（北）移动</h3>
		<h3 style="cursor: se-resize;">此光标指示矩形框的边缘可被向下及向右移动（南/东）</h3>
		<h3 style="cursor: sw-resize;">此光标指示矩形框的边缘可被向下及向左移动（南/西）</h3>
		<h3 style="cursor: s-resize;">此光标指示矩形框的边缘可被向下移动（南）</h3>
		<h3 style="cursor: w-resize;">此光标指示矩形框的边缘可被向左移动（西）</h3>
		<h3 style="cursor: text;">此光标指示文本</h3>
		<h3 style="cursor: wait;">此光标指示程序正忙（通常是一只表或沙漏）</h3>
		<h3 style="cursor: help;">此光标指示可用的帮助（通常是一个问号或一个气球）</h3>
	</body>
</html>

注：很多个人博客都喜欢将鼠标样式进行自定义图片。而且效果还很不错，大家可以多借鉴借鉴！

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！