使用CSS的光标图像

Question

当有人将鼠标悬停在地图图像上时，我想使用195 x 29的图像来替换手。我正在尝试做这个css，但如果没有可用的css选项，会考虑使用javascript选项。我尝试了几种不同的css选项，但无法得到我正在寻找的结果。目前我将我的css代码设置为：

#docmap {float:left;width:620px;height:225px;}
.click a:hover {cursor:url(images/click.png) no-repeat !important;}

我的html是：

<div id="docmap" class="click"><a href="http://goo.gl/maps/R3TXp" target="_blank"><img src="http://whistlerworks.com/clients/918smile/site/wp-content/themes/Karma/images/map.png" alt="" /></a></div>

感谢您的帮助。

Answer 1

.click a {cursor: url(images/click.png), pointer}

https://developer.mozilla.org/en-US/docs/CSS/cursor/url

Answer 2

检查一下，可能有助于让我知道它是否有用

http://www.htmlgoodies.com/beyond/css/create-custom-cursors-with-javascript-and-css3.html#fbid=2P5qQIHDj3T

Answer 3

最安全的图像格式是32x32 8位黑白.ico文件。

正如@isherwood所提到的，基本语法是：

.click a {
    cursor: url(my-icon.ico), auto;
}

我认为JavaScript不会有所帮助。任何可用的浏览器支持都可能仅通过CSS。并且你必须愿意与一些浏览器一起生活，而不是支持它（即逐步增强）。

在不同浏览器中进行测试

这是一个使用各种图像格式的demo。将鼠标移到方块上以找出每个浏览器中有效的方法。在每种情况下，如果它有效，你会看到一个蝴蝶光标。

异常：底行使用完全透明的图像，因此您根本看不到任何光标。在前两行的“帮助”列中，您应该看到默认的帮助图标（这是所有其他方块的后备光标）。