MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

Using URL values for the cursor property

Gecko 1.8 (Firefox 1.5,SeaMonkey 1.0) 支持CSS的URL值 cursor 属性在Windows和Linux。Mac支持是在Gecko 2(Firefox 4)中添加的。这允许将任意图像指定为鼠标光标 - 可以使用Gecko支持的任何图像格式。

语法

此属性的基本(CSS 2.1)语法是:

cursor: [<url>,]* keyword;

这意味着可以指定零个或多个URL(逗号分隔),后面必须跟随CSS规范中定义的一个关键字,例如 auto或 pointer。

例如,将允许以下值:

cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;

首先尝试加载 foo.cur。如果文件不存在或者其它无效原因,bar.gif被尝试加载,如果bar.gif不能被加载,那么使用auto

在Gecko 1.8beta3 (Deer Park Alpha 2)中加入了对CSS3 语法的指针属性的支持。

cursor:  [<uri> [<x> <y>]?,]* keyword

因此,它能在Firefox 1.5中工作。它允许定义指针的热点,加强对指针图橡的边界的控制。如果一个也没有设置,指针的热点会从文件本身读取(适合CUR和XBM文件类型)。否则,设置成图像的左上角。一个CSS3语法的例子:

.foo  {
    cursor:  auto;
    cursor:  url(cursor1.png) 4 12, auto;
}

.bar  {
    cursor:  pointer;
    cursor:  url(cursor2.png) 2 2, pointer;
} 

/* 
fallsback onto 'auto' and 'pointer' in IE, 
but must be set separately 
*/

第一个数字是X坐标,第二个数字是Y坐标。该示例将热点设置为从左上角(0,0)到(4,12)处的像素。

局限性

可以使用任何被Gecko所支持的图像格式。这意味着你可以使用BMP,JPG,CUR,GIF等等。可是,ANI不被支持。还有即使你定义一个GIF动画,指针也不会变成GIF动画。这个局限性可能在以后的版本去掉。

Gecko它本身不能限制被替换的指针大小。无论如何,你应该自己限制图像的最大值在32x32,以便兼容各种平台的操作系统。尤其是大于这个尺寸的指针不能在Windows 9x (95,98,ME)下工作。

透明效果的指针在Windows XP以前都不被支持。这是操作系统的一个局限性。透明效果可以在所有平台下工作。

只 有Windows,OS/2和Linux(使用Gtk+ 2.4及更高版本)的Mozilla版本支持光标属性的URL参数。其它版本可能在以后的版本中加入支持(Mac OS: bug 286304, QNX Neutrino: bug 286307, XLib: bug 286309, Qt: bug 286310, BeOS: bug 298184, Gtk 2.0/2.2: bug 308536)。

关于其它浏览器的兼容性

Microsoft Internet Explorer 6.0还支持cursor属性的URI值。然而:

  • IE只支持CUR和ANI格式。
  • IE不支持带有x和y坐标的CSS 3语法。将忽略光标图像和属性的其余部分。
Browser Lowest version formats (e.g.) x-y-coordinates
Internet Explorer 6.0 .cur | .ani ---
Firefox (Gecko), Windows and Linux 1.5 (1.8) .cur | .png | .gif | .jpg 1.5 (1.8)
Firefox (Gecko) 4.0 (2.0) .cur | .png | .gif | .jpg | .svg (Gecko 2.0)
Opera --- --- ---
Safari (Webkit) 3.0 (522-523) .cur | .png | .gif | .jpg 3.0 (522-523)
Since OS X 10.5 supports Safari (Mac) .curfiles

它也使用不严格的光标属性语法。例如像这样的参数:

cursor: url(foo.cur);

或者:

cursor: url(foo.cur), pointer, url(bar.cur), auto;

可以在MSIE上工作,但是不能在Gecko上面工作。因为Gecko的兼容性与CSS的规范一致,URIs表始终放置在前面,在最后放置正确的关键字。

 

文档标签和贡献者

标签: 
 此页面的贡献者: xgqfrms-GitHub, teoli, ziyunfei
 最后编辑者: xgqfrms-GitHub,