Question

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

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

我最近遇到了一个问题，正确显示在firefox中的css游标，但没有在chrome或safari中显示。

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

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

<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

使用Webkit导航器，CSS：

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

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

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

Answer 4

<强> 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 5

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

<强> CSS

area {
    cursor: help;
    display: block;
}

我们的想法是display任意area正确，因此即使未设置display: inline属性，display: initial和令人惊讶的href也会有效。

Answer 6

尽管已经回答了这个挑战，但我想分享一下我通过实验发现的有用的IE解决方法。

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

我无法让IE确认样式 - 光标在悬停时仍然发生变化:(

解决方案？作为最后的尝试，我添加了样式：

cursor: default;
display: block;

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

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

希望这对某些人有所帮助。

在图像映射区域设置光标[带CSS]

6 个答案: