html - 图像悬停不起作用

Question

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

当我将鼠标悬停在特定区域上时，它应该会在其顶部显示一个图章。 这在 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 将链接放在它上面并显示:堵塞。然后将鼠标悬停在这些链接上，您可以显示您的小图片。