我有一個復雜的背景圖片，其中有很多小區域，需要滾動插圖高亮顯示，以及每個地方的附加文本顯示和關聯鏈接。最終插圖使用z索引堆疊了幾張具有透明度的靜態圖像，并且高光翻轉插圖需要顯示在中間的“三明治”層之一中，以實現所需的效果。在對塊進行一些不成功的擺弄之后，我決定可以使用老式的圖像映射來完成。我制作了具有四個幾何形狀輪廓的示意圖測試圖，并使用png翻轉“填充”了它們。這個想法是將圖像地圖與底部背景層相關聯，使用css {visibility：hidden}初始化所有翻轉，并使用Jquery的懸停方法使其可見，并在單獨的div中顯示相關文本。單獨的文本函數是為什么我不嘗試使用：hover偽類而不是jQuery hover來做到這一點的原因。因為我使用的是圖像地圖，所以我將所有翻轉png（具有透明背景）調整為適合整個容器的大小，以進行精確放置，以便所有內容都能精確對齊。我得到的作品...不是真的！正確映射了圖像映射，以僅激活幾何區域。但是每個翻轉區域中的href只能間歇性地工作，并且將jQuery懸停與CSS可見性結合使用很混亂。所需的行為是，滾動到該區域只會使形狀變實。實際發生的是，形狀內部的任何運動都會在可見和隱藏之間快速切換。當光標停在形狀內時，它可能是可見的，也可能不是。任何想法表示贊賞！懸停設置示例（我最終將使用數組進行實際的懸停，關聯的鏈接和文本）：$('#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>