html - div ボタンのホバー マウスが正しく動作しない

Question

メイン div には 3 つのメイン div があり、これら 3 つの div の下部にはそれぞれ小さなボタンがあります。これは、ルック アンド フィールが同じであるためです。3 つすべてに同じクラス「readMore_button」があり、CSS でスタイリングしています。現在、最初のブロックのボタンはホバーで動作しますが、残りの 2 つのブロックは動作しません (動作するには、マウスが div ボタンの一番下にある必要があります)。理由がわかりません!!

よろしくお願いします。

<div id="HighLight_blocks_Wrapper">
   <div class="highlight_Block" id="Management_block_01">
     <div class="highLight_block_label">Management</div>
       <div class="readMore_button"><a href="/myURL">Read More</a></div>
   </div>

    <div class="highlight_Block" id="valuation_block_01">
      <div class="highLight_block_label">Valuation</div>          
        <div class="readMore_button"><a href="/myURL2">Read More</a></div>
    </div>

    <div class="highlight_Block" id="SelectGreen_block_01">
       <div class="highLight_block_label">Select Green</div>       
          <div class="readMore_button"><a href="/myURL3">Read More</a></div>
     </div>
</div>

CSS

 #HighLight_blocks_Wrapper {
    position: relative;
    width: 100%;
    height: 400px;
    margin-top: 10px; 
 }

.highlight_Block {
    position: relative;
    float: left;
    width: 321px;
    height: 370px;
    margin-left: 15px;
    margin-top: 15px;
    background-color: #F5F5F5;
    border: solid;
    border-width: 1px;
    border-color: #E8E8E8;
}
.readMore_button {
    width: 75px;
    height: 26px;
    position: absolute;
    right: 10px;    
    bottom: 10px;
    background-color: grey;
    background: url("/assets/Images/view_more_01.png") no-repeat;
}
.readMore_button a {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica; 
    font-size: 13px;
    color: #464444;
    margin-left: 6px;
    line-height: 26px;
    text-decoration: none;
}
.readMore_button:hover {
    background: url("/assets/Images/view_more_02.png") no-repeat;     
}
.readMore_button:hover a {
    color: #fff;
}