彼此重叠的2个div不能悬停在两者上

Question

有没有办法悬停在两个三角形上？ 这就是我的意思：http://www.free-creations.nl/help 如你所见，我在三角形周围做了一个边框。 三角形彼此重叠。 有可能解决这个问题吗？

<div id="galleryp1">
<div class="triangles" id="r1afb1">
    <img src="images/triangle5.png" usemap="#Map"/onclick="img1Big()" border="0">
    <map name="Map" id="Map">
      <area shape="poly" coords="3,262,153,3,301,256,294,263,8,263" href="#"     
onclick="img1Big()" alt="tri1p1" />
    </map>
</div>
<div class="triangles" id="r1afb2">
    <img src="images/triangle2.png" usemap="#Map2" border="0"/>
    <map name="Map2" id="Map2">
      <area shape="poly" coords="153,256,4,4,303,5,162,257" href="#" alt="tri2p1" />
</map>
</div>
<div class="triangles" id="r1afb3">
    <img src="images/triangle5.png"/>
</div>
</div>

</div>


.triangles
{
width:307px;
height:267px;
float:left;
} 

#galleryp1
{
position:relative;
width:1054px;
height:267px;
margin:auto;
top:222px;
}
#r1afb1
{
position: absolute;
left: -1px;
border: #000 thin solid;
}
#r1afb2
{
position:absolute;
left:187px;
border:green thin solid;
}

#r1afb3
{
position:absolute;
left:374px;
border:thin solid red;
}