悬停部分图像以查看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>