当前位置：网站首页 > IT知识 > 正文

令人眼前一亮的——鼠标指针自定义

liuian 2025-01-11 15:10 43 浏览

如果经常逛别人博客会发现，有些个人博客鼠标指针并不是系统指针，而是自定义的。这些小细节确实能让人眼前一亮。

研究了下发现实现其实很简单，而且也很常用。

cursor

正是基于这个日常开发中十分常用的鼠标样式属性来实现的。它有个被忽视的属性——url。可以使用url在引入图片或者cur文件来自定义网站的鼠标样式。

注意点

1：如果使用图片自定义，必须使用png，如果使用其它格式的图片将无法加载

2：如果使用图片自定义，大小最好在32*32，不宜过大，过大的图片同样不加载

3：png才是通用的，cur是适用于window的系统指针文件，mac请替换为对应的系统鼠标指针文件格式

如何找鼠标指针文件

1：自制png，如果是公司项目，可以让ui设计

2：美化网站

可以去致美化看看，使用的时候注意版权。

如何使用png/cur文件

其实用法是一样的，都是基于url实现。

cur:

cursor: url(/src/assets/cursor/KUDACursorsSet/Arrow.cur),auto;

png:

cursor: url(/src/assets/img/LsCursor.png),auto;

如何便捷替换网站内的所有指针

目前没有太好的方案便捷的替换网站内所有的鼠标样式，毕竟cursor也是依赖选择器来实现的，而且cursor属性会被覆盖，不能同一dom添加多个。这就导致只能根据不同选择器来设置不同的鼠标样式，如：

body{
  cursor: url(/src/assets/cursor/KUDACursorsSet/Arrow.cur),auto;
  /* 文本鼠标指针样式 */
  p,span{
    cursor: url(/src/assets/cursor/KUDACursorsSet/ArrowUp.cur), text !important;
  }

  /* 鼠标悬停在链接上时 */
  a,button {
    cursor: url(/src/assets/cursor/KUDACursorsSet/Link.cur),pointer !important;;
  }

}

以上样式肯定是不全的，只能大概设置样式。其它样式的设置，方便点的方法是设置class名，哪些dom需要这些样式，手动添加class名称，或者添加全局变量方法(依赖于less/scss)，配合全局样式/全局变量也能稍微方便点。

/* 禁止 */
.cursor_not_allow{
  cursor: url(/src/assets/cursor/KUDACursorsSet/notAllow),pointer !important;
}
/* 移动 */
.cursor_move{
  cursor: url(/src/assets/cursor/KUDACursorsSet/move),pointer !important;
}
/* 左上角拖拽 */
.cursor_resize_left_top{
  cursor: url(/src/assets/cursor/KUDACursorsSet/resizeLeftTop),pointer !important;
}

鼠标指针集合

以下是cursor支持的所有鼠标样式：

类型	CSS 值	描述
General	auto	浏览器根据当前内容决定指针样式例如当内容是文字时使用 text 样式
	default	默认指针，通常是箭头。
	none	无指针被渲染
链接及状态	context-menu	指针下有可用内容目录。
	help	指示帮助
	pointer	悬浮于连接上时，通常为手
	progress	程序后台繁忙，用户仍可交互 (与wait 相反).
	wait	程序繁忙，用户不可交互 (与progress 相反).图标一般为沙漏或者表。
选择	cell	指示单元格可被选中
	crosshair	交叉指针，通常指示位图中的框选
	text	指示文字可被选中
	vertical-text	指示垂直文字可被选中
拖拽	alias	复制或快捷方式将要被创建
	copy	指示可复制
	move	被悬浮的物体可被移动
	no-drop	当前位置不能扔下 Firefox bug 275173Windows 或 Mac OS X 中 "no-drop 与 not-allowed 相同".
	not-allowed	不能执行
	grab	可抓取译者注:grab 和 grabbing 在比较后期才被支持，见浏览器兼容表
	grabbing	抓取中
重设大小及滚动	all-scroll	元素可任意方向滚动（平移）. Firefox bug 275174Windows 中，"all-scroll 与 move 相同".
	col-resize	元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头
	row-resize	元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头
	n-resize	某条边将被移动。例如元素盒的东南角被移动时使用 se-resize
	e-resize
	s-resize
	w-resize
	ne-resize
	nw-resize
	se-resize
	sw-resize
	ew-resize	指示双向重新设置大小
	ns-resize
	nesw-resize
	nwse-resize
缩放	zoom-in	指示可被放大或缩小
缩放	zoom-out	指示可被放大或缩小