html - divs 按钮悬停鼠标行为不正确

Question

我在一个主 div 中有三个主要的主 div，这三个 div 在底部都有一个小按钮，因为它们的外观和感觉是一样的，所以我有相同的类“readMore_button”，它们三个都在 css 中设置样式.现在，第一个 block 中的按钮在悬停时表现良好，但其余两个则不然(鼠标必须非常位于 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;
}

Answer 1

我正在使用 squarespace CMS 并且我在它们中的每一个中都使用了内容 block ，因此出现了问题。

<squarespace:block-field id="BlockField_Management" class="BlockField_02" columns="10"/>

此行创建了许多 div block ，我通过网络检查器注意到，在第二个和第三个 div 中，一些 div 重叠阅读更多按钮，这就是鼠标悬停行为不正确的原因。

解决方案使用 z-index 到 .readMore_button 类。

.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;

 z-index:100;