对span设置鼠标光标样式

Posted 寄蜉蝣于天地，渺沧海之一粟

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了对span设置鼠标光标样式相关的知识，希望对你有一定的参考价值。

 1 <html>
 2 
 3 <body>
 4 <p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
 5     <span style="cursor:auto">Auto</span><br />
 6     <span style="cursor:crosshair">Crosshair</span><br />
 7     <span style="cursor:default">Default</span><br />
 8     <span style="cursor:pointer">Pointer</span><br />
 9     <span style="cursor:move">Move</span><br />
10     <span style="cursor:e-resize">e-resize</span><br />
11     <span style="cursor:ne-resize">ne-resize</span><br />
12     <span style="cursor:nw-resize">nw-resize</span><br />
13     <span style="cursor:n-resize">n-resize</span><br />
14     <span style="cursor:se-resize">se-resize</span><br />
15     <span style="cursor:sw-resize">sw-resize</span><br />
16     <span style="cursor:s-resize">s-resize</span><br />
17     <span style="cursor:w-resize">w-resize</span><br />
18     <span style="cursor:text">text</span><br />
19     <span style="cursor:wait">wait</span><br />
20     <span style="cursor:help">help</span>
21 </body>
22 
23 </html>

 

 

crosshair;

十字准心

The cursor render as a crosshair
游标表现为十字准线

cursor: pointer; 
cursor: hand;
写两个是为了照顾IE5，它只认hand。

手

The cursor render as a pointer (a hand) that indicates a link
游标以暗示(手指)的形式来表明有一个连接

cursor: wait;

等待/沙漏

The cursor indicates that the program is busy (often a watch or an hourglass)
游标暗示当前程序正忙(一般为一块表或是一个沙漏)

cursor: help;

帮助

The cursor indicates that help is available (often a question mark or a balloon)
游标暗示当前位置可得到帮助(一般为问号或是气球)

cursor: no-drop;

无法释放

cursor: no-drop;

cursor: text;

文字/编辑

The cursor indicates text
游标暗示当前所处位置为文字内容

cursor: move;

可移动对象

The cursor indicates something that should be moved
游标暗示一些东西应该被移动

cursor: n-resize;

向上改变大小(North)

The cursor indicates that an edge of a box is to be moved up (north)
边缘可向上移动(北)

cursor: s-resize;

向下改变大小(South)

The cursor indicates that an edge of a box is to be moved down (south)
边缘可向下方移动(南)

cursor: e-resize;

向右改变大小(East)

The cursor indicates that an edge of a box is to be moved right (east)
box边缘可向右(东)边移动

cursor: w-resize;

向左改变大小(West)

The cursor indicates that an edge of a box is to be moved left (west)
边缘可向左移动(西)

cursor: ne-resize;

向上右改变大小(North East)

The cursor indicates that an edge of a box is to be moved up and right (north/east)
游标暗示box的边缘可向右上方移动(东北方向)

cursor: nw-resize;

向上左改变大小(North West)

The cursor indicates that an edge of a box is to be moved up and left (north/west)
边缘可向左上方移动(西北)

cursor: se-resize;

向下右改变大小(South East)

The cursor indicates that an edge of a box is to be moved down and right (south/east)
边缘可向右下方移动(东南)

cursor: sw-resize;

向下左改变大小(South West)

The cursor indicates that an edge of a box is to be moved down and left (south/west)
边缘可向左下方移动(西南)

cursor: auto;

自动

The browser sets a cursor
浏览器设置一个游标

cursor:not-allowed;

禁止

cursor:not-allowed;

cursor: progress;

处理中

cursor: progress;

cursor: default;

系统默认

The default cursor (often an arrow)
默认的游标状态（通常为一个箭头）

cursor: url(‘ # ‘);
# = 光标文件地址      (注意文件格式必须为：.cur 或 .ani)。

用户自定义（可用动画）

The url of a custom cursor to be used.
自定义游标的url位置

Note: Always define a generic cursor at the end of the list in case none of the url-defined cursors can be used
注意：在定义完自定义的游标之后在末尾加上一般性的游标，以防那些url所定义的游标不能使用

 

参考链接：http://www.w3school.com.cn/cssref/pr_class_cursor.asp

http://www.jb51.net/css/23361.html

 

以上是关于对span设置鼠标光标样式的主要内容，如果未能解决你的问题，请参考以下文章

其他样式属性

css 如何改变鼠标图标

CSS---cursor 鼠标指针光标样式（形状）

请教a标签的属性样式，能否只有鼠标移入的效果，点击是没任何指向链接

验证码文本框为何鼠标光标切不进去

用图片替代cursor光标样式