html - 悬停图像的一部分以查看 div

Question

我想在绿色黄色或蓝色选择上悬停这样的文本。我知道这很复杂(即使使用不跨浏览器兼容的 html5 和 css3)，因为图像中有 3d 形状。所以我认为它会至少能够悬停其中一个矩形然后看到悬停文本，如下例所示。

任何想法如何只用 html/css 很好地做到这一点

我尝试了一些图像贴图，也尝试将不可见的 div 的位置更改为在悬停时可见，但效果不佳

Answer 1

超越 paislee 的答案，我们可以做到这一点，这将与 IE8 兼容，并允许比 title 工具提示更好的样式。它可以用 CSS 设置样式并且不需要 javascript 来显示:

像这样:http://jsfiddle.net/DVWkT/

编辑:嘿嘿，我玩得很开心...正如您所注意到的，我们可以更改定位并让悬停显示的元素远远超出父项的范围。 http://jsfiddle.net/DVWkT/2/

#myImage {
    position: relative;
    background: url(image.url);
    width: /**image width*/;
    height: /**image height*/;
}

#innerHover {
    position: absolute;
    top: /**distance from top of image */;
    left: /**distance from left of image */;
    width: /**region width*/;
    height: /**region height*/;
}
#popupdiv{
    //style however you like
}
#innerHover #popupdiv{
   display:none;
}
#innerHover:hover #popupdiv{
    display:block;
}

像这样的 html:

<div id="myImage">
    <div id="innerHover" title="hover text"><div id="popupdiv">Fancy pop up content with no javascript! And it's backwards compatible to IE8!</div></div>
</div>