Question

仍处于工作状态，但发现了一个我无法弄清楚的问题。我非常擅长涉猎并解决问题，但在网络开发方面没有任何正规教育，所以请耐心等待。

我正在处理的site - 当您悬停特定区域时，会有一个带有工具提示的图像映射。在FF中工作得很好，在IE和Safari中没有显示..对于我缺少什么的任何想法？或者更好的实施方式？试图远离JavaScript。谢谢！

我的代码

map { position: relative; }

area + span { position: absolute; margin-left: -9999em; }

area:hover + span {

    position: absolute; /* can only be positioned relative to the entire map, not the area */

    left: 100px;

    top: -700px;

    z-index: 5000;

    color: #ffffff;

    background: #ec287a;

    border: 1px solid #ffffff;

    margin: 0;

    width: 600px;

    padding: 20px;

}

<p style="text-align: center;"><img src="images/ruffwaytext.png" alt="" /></p>
<center><img src="http://www.skilledgraphics.com/pawshie/images/ruffway.png" width="1200" height="670" usemap="#planetmap" /></center>
<map name="planetmap">
    <area shape="rect" coords="377,309,835,615" alt="Ruffway Hills" <a href="ruff" /><span><center><strong>RUFFWAY HILLS<br>Tottie loves stargazing here and pointing out constellations to her friends</strong></center></span>
</map>

Answer 1

尝试编写img标记，如下所示：

<img src="http://www.skilledgraphics.com/pawshie/images/ruffway.png" width="1200" height="670" usemap="#planetmap" title="tooltip text goes here blah blah blah" />

你的＆lt;中包含的title属性IMG /＆GT;标签应显示您在引号中包含的内容的hovertext。它受IE，FFox，Chrome，Safari和Opera的支持。

不在IE浏览器上显示的CSS工具提示，适用于FireFox

1 个答案: