自定义光标图像 CSS [英] Custom Cursor Image CSS

问题描述

我有许多英雄照片，单击时会弹出模态.我试图让光标在图像上移动时变成放大镜.即使我的 magnify.cur 出现在正确的位置，以下 CSS 似乎也不起作用.

I have a number of heroshot images, that have a modal popup when clicked. I'm trying to get my cursor to turn into magnifying glass whenever it is moved over the image. The following CSS does not appear to work even though my magnify.cur is present in the right location.

a.heroshot img {
  cursor:url(/img/magnify.cur), pointer;
}

有没有人做过类似的事情?如果存在 JavaScript 解决方案，我不介意.

Has anyone ever done anything similar? I don't mind a JavaScript solution if one exists.

编辑:它适用于 Safari，但不适用于 Firefox.

EDIT: It works in Safari, but not in Firefox.

推荐答案

您的问题可能是光标 URL 在 Mac 版 Firefox 中不起作用.

Your problem may be that cursor URLs don't work in Firefox for the Mac.

您可以通过使用 -moz-zoom-in 关键字在 Firefox 上获得相同的效果.

You can get the same effect on Firefox by using the -moz-zoom-in keyword.

cursor:url(/img/magnify.cur), -moz-zoom-in, auto;

这将显示 magnify.cur、Mozilla 特定的缩放光标或系统默认光标.使用浏览器支持的列表中的第一个光标.

This will show magnify.cur, the Mozilla-specific zoom cursor or a system default cursor. The first cursor on the list that the browser supports is used.

您还可以查看不同浏览器支持的光标关键字列表.

You can also see a list of cursor keywords supported by different browsers.

这篇关于自定义光标图像 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！