CSS鼠标指针缩放/放大

Question

我有缩小或放大内容的按钮。 在Firefox中，光标运作正常（类似于带有+的放大镜）。 但是在Chrome中，我没有默认的光标。 这是我的代码：

我有缩小或放大内容的按钮。 在Firefox中，光标运作正常（类似于带有+的放大镜）。 但是在Chrome中，我没有默认的光标。 这是我的代码：

.button.zoom-in {
   ...
   cursor: zoom-in;
}

有人能帮我解决问题吗？为什么在火狐浏览器中生效而在谷歌浏览器中不生效呢？同时，像help、move、pointer这样的其他光标在谷歌浏览器中也可以使用。

- Patrik Krehák

---

第一个谷歌搜索结果：http://www.sitepoint.com/css3-cursor-styles/ 简而言之：使用-webkit-前缀。 - Kyle

你可以将其编写为答案。谢谢，我不介意它可以是CSS3。 - Patrik Krehák

我认为这不是一个好答案，因为它本质上只是一个指向外部来源的链接。在这里重复它并不是一个真正有效的答案。 - Kyle

@KyleSevenoaks：把答案放在StackOverflow上。仅仅因为答案已经存在于互联网上，并不意味着它不应该出现在这里，否则StackOverflow将会相当空洞，每个回复都是“去别的地方找答案”。 - Doug S

Answer 1

对于 Chrome，您必须使用前缀属性值：

.button.zoom-in {
   ...
   cursor: -webkit-zoom-in;
   cursor: zoom-in;
}

这里有一个jsfiddle。

- Fabian Mebus

---

我还注意到，如果您在同一属性中使用两个内联样式，Chrome会采用该属性的最后定义值。不要使用内联样式。 - David

Answer 2

这个页面来自Mozilla，是一个关于不同光标以及每个浏览器兼容性的卓越参考。

对于放大和缩小光标，以下代码适用于Chrome 1.0+，Firefox 1.0+，Opera 11.6+和Safari 3.0+。IE不支持放大缩小光标。

.button.zoom-in {
    cursor: -moz-zoom-in; 
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
}

- tohster