4
CSS cursor属性介绍
source link: https://www.fly63.com/article/detial/11724
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
cursor属性定义
cursor 属性规定要显示的光标的类型（形状）。 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。
可能的值：Auto、crosshair、default、pointer、move、e-resize、ne-resize、nw-resize、n-resize、se-resize、sw-resize、s-resize、w-resize、text、wait、help 。
使用方法
<!-- cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状；-->
div {
cursor: [某个值]
}测试代码
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">Auto</span><br />
<span style="cursor:crosshair">Crosshair</span><br />
<span style="cursor:default">Default</span><br />
<span style="cursor:pointer">Pointer</span><br />
<span style="cursor:move">Move</span><br />
<span style="cursor:e-resize">e-resize</span><br />
<span style="cursor:ne-resize">ne-resize</span><br />
<span style="cursor:nw-resize">nw-resize</span><br />
<span style="cursor:n-resize">n-resize</span><br />
<span style="cursor:se-resize">se-resize</span><br />
<span style="cursor:sw-resize">sw-resize</span><br />
<span style="cursor:s-resize">s-resize</span><br />
<span style="cursor:w-resize">w-resize</span><br />
<span style="cursor:text">text</span><br />
<span style="cursor:wait">wait</span><br />
<span style="cursor:help">help</span>基本属性
| 值 | 描述 |
|---|---|
| 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 | 此光标指示可用的帮助（通常是一个问号或一个气球）。 |
cursor url用法
url 引入光标时一定为 [.cur] 或者 [.ani] 文件，一定要设置默认值（以防URL 定义的可用光标使可备用！），否则会出现无法显示的问题。
div{
cursor:url("路径"),default;
}图标的格式：
IE支持cur,ani,ico这三种格式，FF支持bmp,gif,jpg,cur,ico这几种格式，不支持ani格式，也不支持gif动画格式，因此来说一般将url引用的图片存为ico或cur格式比较好！
图标的大小：
鼠标图片的尺寸推荐尺寸是32*32，否则可能会导致图标大小不一致的问题！
注：另外对于在浏览器中鼠标图片不显示的问题，问题大多出在对鼠标图片URL路径的引用上， 可以分别尝试下绝对和相对路径的引用。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK