8

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

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>

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

4

6 回答 6

14

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

长话短说，我最终需要设置 display:block; 在区域标签上。我的基本 css 或浏览器默认标签为 display: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;
}

希望这可以帮助某人。

于 2013-08-21T20:47:18.400 回答
1

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

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

于 2012-05-08T17:01:11.643 回答
1

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 的区域设置光标类型。

于 2012-12-07T21:13:39.003 回答
1

使用 Webkit 导航器，CSS：

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

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

<area ... href="javascript:void(0);" />
于 2013-09-10T11:48:47.793 回答
0

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

CSS

area {
    cursor: help;
    display: block;
}

我们的想法是正确显示任何内容area，因此display: inline即使未设置属性display: initial也可以正常工作。href

于 2014-11-12T02:25:59.857 回答
0

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

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

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

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

cursor: default;
display: block;

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

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

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

于 2017-01-25T07:55:48.430 回答