css如何改变鼠标样式

跟大家讲解下有关css如何改变鼠标样式，相信小伙伴们对这个话题应该也很关注吧，现在就为小伙伴们说说css如何改变鼠标样式，小编也收集到了有关css如何改变鼠标样式的相关资料，希望大家看到了会喜欢。

在css中，可以使用cursor属性来改变鼠标的样式，该属性可以指定鼠标指针放在一个元素边界范围内时所用的光标形状；例如当属性值为“url(..)”可自定义鼠标样式，“crosshair”设置十字线样式，“pointer”设置小手样式。

本教程操作环境：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此光标指示可用的帮助（通常是一个问号或一个气球）。

（学习视频分享：css视频教程）

以上就是css如何改变鼠标样式的详细内容，更多请关注php中文网其它相关文章！

来源：php中文网

　　免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。 如有侵权请联系删除！