css样式cursor属性值

来源：互联网发布：新开淘宝网店卖什么好编辑：程序博客网时间：2024/05/20 06:30

定义：设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

使用自定义图像作为光标类型，IE, Opera只支持*.cur等特定的图片格式；Firefox, Chrome, Safari既支持特定图片类型也支持常见的*.png, *.gif, *.jpg等图片格式。

cursor的属性值可以是一个序列
示例代码：
```
:link,:visited{cursor:url(example.svg#linkcursor),url(hyper.cur),url(hyper.png) 2 3,pointer;}
```
本例用来给所有的超链接定义光标类型，客户端如果不支持SVG类型的光标，则使用下个"hyper.cur"；如果cur类型也不支持，则使用下个"hyper.png"；依次类推。
对应的脚本特性为cursor。

取值：
auto：
    用户代理基于当前上下文决定光标形状
default：
    相关平台的默认光标形状，通常为箭头。
none：
    没有光标形状

各个属性值的兼容性：

如下是cursor的全部属性例子：

<span style="font-family:KaiTi_GB2312;"><!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title>cursor_CSS参考手册_web前端开发参考手册系列</title><meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /><style>.test{width:400px;border-collapse:collapse;font:14px/1.5 georgia,arial,serif,sans-serif;}.test td{padding:2px 10px;border:1px solid #ddd;}.test td:hover{background:#eee;}.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;}.e-resize{cursor:e-resize;}.n-resize{cursor:n-resize;}.ne-resize{cursor:ne-resize;}.nw-resize{cursor:nw-resize;}.s-resize{cursor:s-resize;}.se-resize{cursor:se-resize;}.sw-resize{cursor:sw-resize;}.w-resize{cursor:w-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;}.zoom-in{cursor:zoom-in;}.zoom-out{cursor:zoom-out;}.url{cursor:url(skin/cursor.gif),            url(skin/cursor.png),            url(skin/cursor.jpg),            pointer;}</style></head><body><table class="test">    <caption>cursor光标类型</caption>    <tbody>        <tr>            <td class="auto">auto</td>            <td class="default">default</td>            <td class="none">none</td>            <td class="context-menu">context-menu</td>            <td class="help">help</td>            <td class="pointer">pointer</td>            <td class="progress">progress</td>        </tr>        <tr>            <td class="wait">wait</td>            <td class="cell">cell</td>            <td class="crosshair">crosshair</td>            <td class="text">text</td>            <td class="vertical-text">vertical-text</td>            <td class="alias">alias</td>            <td class="copy">copy</td>        </tr>        <tr>            <td class="move">move</td>            <td class="no-drop">no-drop</td>            <td class="not-allowed">not-allowed</td>            <td class="e-resize">e-resize</td>            <td class="n-resize">n-resize</td>            <td class="ne-resize">ne-resize</td>            <td class="nw-resize">nw-resize</td>        </tr>        <tr>            <td class="s-resize">s-resize</td>            <td class="se-resize">se-resize</td>            <td class="sw-resize">sw-resize</td>            <td class="w-resize">w-resize</td>            <td class="ew-resize">ew-resize</td>            <td class="ns-resize">ns-resize</td>            <td class="nesw-resize">nesw-resize</td>        </tr>        <tr>            <td class="nwse-resize">nwse-resize</td>            <td class="col-resize">col-resize</td>            <td class="row-resize">row-resize</td>            <td class="all-scroll">all-scroll</td>            <td class="url">url</td>            <td class="zoom-in">zoom-in</td>            <td class="zoom-out">zoom-out</td>        </tr>    </tbody></table></body></html></span>

1 0