0

当有人将鼠标悬停在地图图像上时，我想使用 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>

谢谢您的帮助。

4

3 回答 3

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

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

于 2013-02-27T15:06:25.290 回答
1

看看这个，可能有助于让我知道它是否有用

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

于 2013-02-27T15:07:57.353 回答
0

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

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

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

我认为 JavaScript 不会有帮助。任何可用的浏览器支持都可能仅通过 CSS。而且您必须愿意忍受一些根本不支持它的浏览器（即渐进增强）。

在不同的浏览器中测试

这是一个使用多种图像格式的演示。将鼠标移到方块上以了解每个浏览器的工作原理。在每种情况下，如果它有效，您将看到一个蝴蝶光标。

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

于 2013-02-27T15:55:43.977 回答