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

有什么方法可以在使用CSS的area元素上设置cursor？看起来不是。这段代码似乎什么都不做。在图像地图区域上设置光标[使用CSS]

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>

最好的黑客，我已经能够拿出是绝对定位在该区域顶部的链接，并给它光标样式。

来源

2012-05-08 Bart

LO。 oks喜欢唯一的方法是通过java脚本强制它... – Elen

我最近有一个问题，正确显示在Firefox中的CSS游标，但不是在铬或Safari浏览器。长话短说，我结束了需要设置显示：块;在区域标签上。无论是我的基地的CSS，或浏览器默认标签显示：无;

这是我创建的快速测试案例（检查出来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; 
}

希望这可以帮助别人。

来源

2013-08-21 20:47:18 toazron1

你，先生，是一个坏蛋 - 而且非常感谢jsfiddle。尼斯弗洛伊德图像，顺便说一句。 – mtyson

这应该被标记为正确的解决方案，非常简单和容易修复。 –

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

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

来源

2012-05-08 17:01:11

我曾希望有一些我错过了，但它似乎没有。感谢您的反馈。 – Bart

这不是正确的答案，因为有问题的直接解决方案。 toazron1已发布正确答案。 – rayred

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-07 21:13:39 abriggs

你在铬和safari中测试过吗？它似乎并不适用于所有的铬和Safari浏览器。 –

@SrdjanDejanovic，尝试将图像的_usemap_属性设置为地图的_name_。 – abriggs

随着Webkit的浏览器中，CSS：

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

不工作，所以我使用的 “href”，你可以这样

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

来源

2013-09-10 11:48:47 guaph

通过给出的答案toazron1在工程完全禁用WebKit的/ Safari和没有任何不好的问题：

CSS

area { 
    cursor: help; 
    display: block; 
}

的想法是正确display任何area，所以display: inline和令人惊讶display: initial也将工作，即使href属性未设置。

来源

2014-11-12 02:25:59

这应该可能是一个评论，而不是一个答案。 – Chris

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

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

我无法让IE浏览器承认的样式 - 光标依然改变悬停:(

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

cursor: default; 
display: block;

，但我有关他们也用于地图本身的形象：

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

希望这有助于一些

来源

2017-01-25 07:55:48 AjA

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

回答

相关问题