CSS cursor属性

在本文中，我们将介绍CSS的cursor属性，它用于设置鼠标指针在元素上的样式。

阅读更多：CSS 教程

基本使用

cursor属性可以在CSS中用于控制鼠标指针样式，在应用中有许多种不同的模式，包括默认、手形、文本、拖动等。以下是一些基本使用方式。

默认指针

默认指针是指鼠标普通状态下的样式，可以写作：

cursor:default;

手形指针

手形指针常用于指示可以被点击的元素，可以写作：

cursor:pointer;

文本光标

文本光标是指可编辑元素中的激活光标，可以写作：

cursor:text;

拖动

拖动光标是指鼠标在拖动内容时的样式，可以写作：

cursor:move;

选择

选择光标是指鼠标在选择文本时的样式，可以写作：

cursor:crosshair;

指向东、西、南、北

鼠标指向东、西、南、北的箭头指针，可分别写作：

cursor:e-resize;/*东*/
cursor:w-resize;/*西*/
cursor:s-resize;/*南*/
cursor:n-resize;/*北*/

改变大小

拖动大小指针是指在拉伸或缩小框或视窗中使用的样式，可以写作：

cursor:col-resize;
cursor:row-resize;
cursor:se-resize;
cursor:ne-resize;

高级用法

除了基本用法之外，cursor属性还可以更进一步配置更复杂的样式，实现更丰富多彩的效果。

自定义指针

可以通过定义图片资源来替换默认鼠标指南中的箭头图标:

cursor:url('arrow.png'),auto;

这样所有鼠标的样式都会改变为定义的图片，该图片会跟随鼠标移动。

crosshair与imagemap联合使用

例如，在使用imagemap绘制不规则区域时，需要定义鼠标指针位置。通常的方法是使用cursor:none来去掉默认鼠标指针，然后定义自己的指针。

例如如下HTML代码中，可以在图片的不同区域设置不同的光标样式：

<img src="map.gif" alt="Click Me" usemap="#map"/>
<map name="map">
  <area shape="rect" coords="0,0,100,100" href="#" style="cursor:pointer"
  <area shape="rect" coords="100,100,200,200" href="#" style="cursor:crosshair"
  <area shape="rect" coords="200,200,300,300" href="#" style="cursor:url(hand.cur),auto">
</map>

这将使图片不同区域的光标样式分别为手势、准心指针和自定义URL地址。