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

Answer 2

使用title悬停文字定位相对于图片的元素：

<强>标记：

<div id="myImage">
    <div id="innerHover" title="hover text"></div>
</div>

<强>样式：

#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*/;
}

或者对于自定义悬停文字，您可以使用css opacity执行此操作：

<强>标记：

<div id="myImage">
    <div id="innerHover">Hover text</div>
</div>

<强>样式：

#myImage {
    /** same as above */
}

#innerHover {
    /** same as above, plus custom text styles, plus: */
    opacity:0.0;
    filter:alpha(opacity=0);
}

#innerHover:hover {
    opacity:1.0;
    filter:alpha(opacity=100); /** no transparency on hover */
}

• DEMO
• Opacity reference