CSS 光标放大/缩小答案

【问题标题】：CSS cursor zoom-in/outCSS 光标放大/缩小
【发布时间】：2014-06-02 12:55:36
【问题描述】：

我有放大或缩小内容的按钮。在 Firefox 游标中效果很好（它就像带有+ 的放大镜）。但在 chrome 中我有默认光标。这是我的代码：

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

有人可以帮助我，为什么这在 forefox 和 chrome 中不起作用？此外，其他光标（如帮助、移动、指针...）也可以在 chrome 中使用。

【问题讨论】：

第一个 Google 结果：sitepoint.com/css3-cursor-styles tl;dr：使用 -webkit- 前缀。
你可以把它写成答案。谢谢，我不介意它可能是 CSS3
我认为这不是一个好的答案，因为它本质上只是一个外部来源的链接。在这里重复这个答案真的是多余的。
@KyleSevenoaks：将答案放在 StackOverflow 上。仅仅因为答案存在于互联网上的某个地方，并不意味着它也不应该在这里，否则 StackOverflow 将是相当空的，并且每个响应都是“去其他地方寻找答案”。

【解决方案1】：

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

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

这是一个jsfiddle。

【讨论】：

【解决方案2】：

来自 Mozilla 的This page 是对不同光标以及每个光标的浏览器兼容性的出色参考。

对于放大和缩小光标，以下内容应适用于 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;
}

【讨论】：