我有一个复杂的背景图像，其中包含许多需要翻转插图突出显示的小区域，以及每个区域的附加文本显示和相关链接。最终的插图使用 z-index 堆叠了几个具有透明度的静态图像，高光翻转插图需要显示在中间的“三明治”层之一中才能达到预期的效果。
在对块进行了一些不成功的摆弄之后，我决定这可能是用一个老式的图像映射来完成的。我制作了一个带有四个几何形状轮廓的示意性测试地图，并使用 png 翻转来“填充”它们。想法是将图像映射与底部背景层相关联，使用 css {visibility: hidden} 初始化所有翻转，并使用 Jquery 的悬停方法使它们可见，并在单独的 div 中显示相关文本。单独的文本函数是我不尝试使用 :hover 伪类而不是 jQuery 悬停的原因。因为我使用的是图像贴图，所以我将所有翻转 png（具有透明背景）的大小设置为完整的容器以进行精确放置，因此所有内容都精确排列。
我得到的作品......不是真的！图像映射被正确映射以仅激活几何区域。但是每个翻转区域的 href 只能间歇性地工作，并且使用带有 css 可见性的 Jquery 悬停会搞砸。期望的行为是滚动到该区域只会使形状变得坚固。实际发生的是形状内部的任何运动都会在可见和隐藏之间快速切换；当光标停在形状内时，它可能可见，也可能不可见。任何想法表示赞赏！
示例悬停设置（我最终将使用数组进行真正的翻转、关联链接和文本）：
$('#triangle').hover(
function() {
$('#ID_triangle').css({'visibility' : 'visible'});
},
function() {
$('#ID_triangle').css({'visibility' : 'hidden'});
}
)
图像映射：
<div id="container">
<img src="images/testMap_w.png" width="800" height="220" alt="TestMap W" usemap="#testMap">
<map name="testMap">
<area shape="polygon" coords="20,20,106,20,106,106,20,106" href="http://www.stackoverflow.com" id="box" />
<area shape="polygon" coords="216,50,339,50,277,156" href="http://www.google.com" id="triangle" />
<area shape="polygon" coords="460,0,574,0,460,220" href="http://www.cnn.com" id="bordertriangle" />
<area shape="polygon" coords="704,65,769,115,744,196,665,196,640,115" href="http://slashdot.org" id="pentagon" />
</map>
<img src="images/testMap_box.png" width="800" height="220" alt="TestMap Box" id="ID_box">
<img src="images/testMap_triangle.png" width="800" height="220" alt="TestMap Triangle" id="ID_triangle">
<img src="images/testMap_border_triangle.png" width="800" height="220" alt="TestMap Border Triangle" id="ID_bordertriangle">
<img src="images/testMap_pentagon.png" width="800" height="220" alt="TestMap Pentagon" id="ID_pentagon">
</div>