在图像映射区域上设置 [使用 CSS] 光标

Question

有没有办法用CSS在area元素上设置cursor？似乎不是。此代码似乎什么都不做。

.CSS

area {cursor: help;}

.HTML

<img src="blah.png" width="800" height="550" alt="Blah" usemap="#blah-map">
<map name="blah-map">
    <area shape="rect" coords="104,86,210,113" href="okgo.htm" alt="OK Go">
</map>

我能想到的最好的技巧是将链接绝对放置在该区域的顶部，并为其提供光标样式。

Answer 1

我最近遇到了一个问题，即 css 光标在 Firefox 中正确显示，但在 chrome 或 safari 中却没有。

长话短说，我最终需要设置 display：block; 在区域标签上。要么是我的基本 css，要么是浏览器默认标签显示：none;

这是我创建的快速测试用例（在这里查看）

<img usemap="#map" src="http://i.imgur.com/9EcEvkn.jpg" height="120" width="100" />
<map name="map" id="map">
<area shape="rect" coords="0,0,120,100" href="#" />
</map>
area {
    cursor: crosshair;
    display:block;
}

希望这对某人有所帮助。

Answer 2

绝对将链接定位在图像顶部也是我的解决方案/黑客。

如果它不是一个非常重要的图像，你可以通过创建一个以图像为背景的容器，绝对定位链接，并使链接文本成为你当前正在使用的alt文本来相当语义地做到这一点。然后，在链接上使用负text-indent以隐藏视图中的文本。它将按您的预期工作，但是当禁用CSS时，应该显示纯文本链接来代替人造图像映射。

Answer 3

CSS

#blah-map area{
    cursor:default;
}

.HTML

<img src="blah.png" width="800" height="550" alt="Blah" usemap="#blah-map">
<map id="blah-map" name="blah-map">
    <area shape="rect" coords="104,86,210,113" href="okgo.htm" alt="OK Go">
</map>

只需给地图一个 id，然后为该 id 的区域设置光标类型。

Answer 4

使用 Webkit 导航器，CSS ：

area {cursor: help;} /* or other type */

不起作用，所以我使用"href"，你可以像这样禁用

<area ... href="javascript:void(0);" />

Answer 5

toazron1给出的答案在WebKit/Safari中完美运行，没有任何坏问题：

.CSS

area {
    cursor: help;
    display: block;
}

这个想法是正确显示任何area，因此即使未设置 href 属性，display: inline和令人惊讶的display: initial也可以工作。

Answer 6

虽然这个挑战已经得到了解答，但我想分享一个有用的IE解决方法，我通过实验发现了。

问题：我正在使用图像映射，我不希望光标在悬停时更改为手/指针状态。 这适用于不需要实际锚链接的工具提示 （qTip） 实现。 我希望光标保持为箭头（默认状态）或在悬停时将其更改为另一种状态。

我无法让 IE 确认样式 - 光标在悬停时仍然更改:(

解决方案是什么？作为最后一次尝试，我添加了样式：

cursor: default;
display: block;

但我也将它们与用于地图本身的图像相关联：

area, img {cursor: default; display: block;}

希望这对某些人有帮助。