Question

我创建了一个带有几个区域的图像映射。

当我将鼠标悬停在特定区域时，它应在其上方显示一个标记。这在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/

Answer 1

我可能错了，但我不认为图像地图可以做你想做的事情，即在原始图像地图的顶部放置较小的图像。

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

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

图像悬停不起作用

1 个答案: