如何使用CSS设置鼠标(光标)样式的方法介绍介绍

我相信，当您浏览主要网站时，将通过鼠标（光标）的不同样式带来不同的体验。那么如何实现这些光标样式呢？以下文章将向您介绍如何使用CSS设置鼠标（光标）样式，希望对您有所帮助。

在CSS中，您可以通过cursor属性设置鼠标（光标）的样式。 cursor属性指定要显示的光标的类型（形状）；此属性定义将鼠标指针放在元素边界内时使用的光标形状。

注意：所有主流浏览器都支持cursor属性。

css3游标属性的基本语法：

cursor: [ [  [ ]?,]* [ auto | default | none | context-menu | help | pointer | 
     progress | wait |cell | crosshair | text | vertical-text | alias | copy | move | 
     no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | 
     se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | 
     col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ];

注意：

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

2、 cursor属性仅对带有指针设备的设备（例如鼠标）有效；它对触摸设备没有影响。

3、并非所有浏览器都支持cursor属性的所有属性值，并且在所有浏览器和操作系统中所有属性值可能都不相同。

让我们看一下cursor属性的属性值可以设置什么样的光标形状。

图像光标（自定义光标）

：

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

必须在备用列表的末尾提供非URL标准光标关键字。

：

使用小于32的无单位数，并且不允许使用负值。这些值指定了光标热点的坐标。第一个数字是x坐标，第二个数字是y坐标。

示例：

cursor：url（some-cursor.png）2 15，指针;

让我们看一下图像光标的示例：

css代码：

.custom {
  cursor: url(https://img.html.cn/upload/article/000/000/006/5d89c525da790357.png),pointer;
}

效果图：

通用光标（箭头形）

示例：

.auto {
  cursor: auto;
}
.default {
  cursor: default;
}
.none {
  cursor: none;
}

链接和状态光标

示例：

.context-menu {
  cursor: context-menu;
}
.help {
  cursor: help;
}
.pointer {
  cursor: pointer;
}
.progress {
  cursor: progress;
}
.wait {
  cursor: wait;
}

选择光标

示例：

.cell {
  cursor: cell;
}
.crosshair {
  cursor: crosshair;
}
.text {
  cursor: text;
}
.vertical-text {
  cursor: vertical-text;
}

拖放光标

示例：

.alias {
  cursor: alias;
}
.copy {
  cursor: copy;
}
.move {
  cursor: move;
}
.no-drop {
  cursor: no-drop;
}
.not-allowed {
  cursor: not-allowed;
}

缩放光标：

放大（放大），缩小（缩小）：

表示某些内容可以放大或缩小，通常以放大镜的形式显示，在放大镜的中心。“ +”或“-”。

示例：

.zoom-in {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}
.zoom-out {
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

抓住光标

抓住，抓住：

表示可以抓取元素（拖动以移动）。 Grab是“准备拖动”的张开手，而拖动是看起来像在抓东西的“闭合”手。

示例：

.grab {
  cursor: -webkit-grab;
  cursor: grab;
}
.grabbing {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

缩放和滚动光标

示例：

.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;
}

上面是如何在CSS中设置鼠标（光标）样式的？有关更多详细信息，请注意html中文网站上的其他相关文章！

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-363557-1.html