CSS 光标放大/缩小

Question

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

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

有人可以帮助我，为什么它在forefox 和chrome 中不起作用？此外，帮助、移动、指针等其他光标也适用于 chrome。

Answer 1

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

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

这是一个jsfiddle。

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;
}