六边形悬停显示特定内容

Question

Demo

我尝试使用6种不同颜色的三角形绘制六边形..

每个三角形都有不同的内容，它们是相同的三角形颜色。

如果悬停三角形，则仅显示该特定内容...

<div class="hexagon">
  <div class="triangle" id="top_triangle"><span>Psychological</span></div>
   <div class="triangle" id="top_right_triangle"><span>Cognitive</span></div>

   <div class="triangle" id="bottom_right_triangle"><span>Social</span></div>
   <div class="triangle" id="bottom_triangle"><span>Physical</span></div>
     <div class="triangle" id="bottom_left_triangle"><span>Economic</span></div>
      <div class="triangle" id="top_left_triangle"><span>Emotional & <br>Strengths</span></div>



</div> 

问题 悬停不正常。我认为z-index就是那个问题。 如果我悬停粉红色（见下图）我需要图片显示的内容..但我的代码运行显示黄色内容。

我需要任何悬停三角形以显示特定内容的地方。