css如何改变鼠标样式

187 阅读 0 评论 124 点赞

我是靠谱客的博主无聊向日葵，最近开发中收集的这篇文章主要介绍css如何改变鼠标样式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

在css中，可以使用cursor属性来改变鼠标的样式。

cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状

注：

1、cursor属性适用于所有元素；

2、cursor属性仅对具有指针设备（如鼠标）的设备有效；它对触控设备没有任何影响。

3、并非所有浏览器都支持cursor属性的所有属性值，且所有属性值在所有浏览器和操作系统中显示的效果不一定相同。

示例：

1、图像游标（自定义游标）

一个或多个逗号分隔的url()用来指向要用作光标的图像。用户代理从第一个中检索游标url()。如果用户代理无法处理游标列表的第一个游标，则必须尝试处理游标列表等。如果用户代理无法处理任何提供的图像（请参阅浏览器支持），则必须使用游标关键字。列表的末尾。可选的和坐标标识图像中指针位置（即热点）的确切位置。

.custom {
  cursor: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/cursor/clock-cursor.png), url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/cursor/clock-cursor.cur), pointer;
}
登录后复制

2、缩放和滚动游标

e-resize，n-resize，ne-resize，nw-resize，s-resize，se-resize，sw-resize，w-resize
表示要移动某些边缘。例如，se-resize当运动从开始使用光标东南部盒子的角落。

ew-resize，ns-resize，nesw-resize，nwse-resize
表示双向调整大小游标。这些光标类型通常在不同方向上呈现为双向箭头。

col-resize：
此光标通常呈现为左右箭头，并用垂直条分隔它们。它表示可以水平调整项目/列的大小。它类似于您在MS Excel等程序中看到的光标。

row-resize：
此光标通常呈现为向上和向下的箭头，水平条将它们分开。它表示可以垂直调整项目/行的大小。它类似于您在MS Excel等程序中看到的光标。

all-scroll：
此光标通常呈现为向上，向下，向左和向右的箭头，中间有一个点。它表示可以向任何方向滚动某些内容。

.n-resize {
  cursor: n-resize;
}

.ne-resize {
  cursor: ne-resize;
}

.e-resize {
  cursor: e-resize;
}

.se-resize {
  cursor: se-resize;
}

.s-resize {
  cursor: s-resize;
}

.sw-resize {
  cursor: sw-resize;
}

.w-resize {
  cursor: w-resize;
}

.nw-resize {
  cursor: nw-resize;
}

.se-resize {
  cursor: se-resize;
}

.ew-resize {
  cursor: ew-resize;
}

.ns-resize {
  cursor: ns-resize;
}

.nesw-resize {
  cursor: nesw-resize;
}

.nwse-resize {
  cursor: nwse-resize;
}

.col-resize {
  cursor: col-resize;
}

.row-resize {
  cursor: row-resize;
}

.all-scroll {
  cursor: all-scroll;
}
登录后复制

注：

控制设置鼠标指针样式是比较常用的，但光标切记勿滥用，也不要轻易设置自定义图片为鼠标样式这样会将网页造成复杂与不符合用户体验感觉，切记光标慎用。

cursor属性的值

值	描述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。