0

我创建了一个包含几个区域的图像地图。

当我将鼠标悬停在特定区域上时，它应该在其顶部显示一个标记。这在 Chrome 中完美运行，但在 Firefox 或 IE 中不适用。

任何建议为什么这不起作用？
HTML：

<area class="name sold" 
      shape="poly" 
      coords="121,282,101,277,93,259,93,231,103,212,131,207,157,229,149,272," 
      href="#" alt="" title="" />

CSS：

.name 
{
    position: absolute;
    top: 225px;
    left: 50px;
    display: block;
    width: 150px;
    height: 150px;
    z-index: -100;
}
.name.sold:hover 
{
    background-image: url('sold.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    z-index: 100;
}
.name.sale:hover 
{
    background-image: url('forsale.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    z-index: 100;
}

该区域有效，但是当将鼠标悬停在它上面时它什么也没做。

现场示例：http: //jonasgeuens.be/test/

4

1 回答 1

0

我可能是错的，但我不认为图像映射可以做你在这里尝试做的事情，即将较小的图像放在原始图像映射的顶部。

这里的正常做法可能是使用 javascript。

或者，您可以将大图像作为 DIV 上的背景（或作为具有低 z-index 的常规图像），然后使用绝对定位和更高的 z-index 和 display:block 将链接放在它的顶部。然后悬停在这些链接上，您可以显示您的小图像。

于 2012-09-17T11:51:30.913 回答