0

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

1 回答 1

0

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

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

这条线创建了许多 div 块，我通过网络检查器注意到，在第 2 和第 3 中，一些 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;

}

于 2013-07-31T09:22:51.520 回答