2016-03-13 57 views
1

为什么#go-button div不显示光标是“指针”?光标:指针; css不工作

下面是HTML:

<div class="row"> 
    <div class="col-sm-12"> 
     <div id="go-button" class="with-border clickable" href="#find-vegan-products-page" > 
      <h5 class=" text-center medium-text">GO</h5> 
     </div> 
    </div> 
</div> 

这里是CSS:

#go-button { 
     font: 200 14px 'Helvetica Neue' , Helvetica , Arial , sans-serif; 
     border-radius: 6px; 
     height: 64px; 
     text-decoration: none; 
     width: 100%; 
     margin-top: 20px; 
     background-color: #fc4747; 
     padding: 12px; 
     border: 0; 
     color: #fff; 
    } 
    #go-button h5 { 
     font-size: 16px; 
     font-weight: 200; 
    } 
    #go-button h5 #go-button.clickable { 
     cursor: pointer !important; 
     z-index: 999; 
    } 
    #try-now-button:hover, 
    #go-button:hover { 
     text-decoration: none; 
     background-color: #ff8282; 
    } 

回答

4

#go-button h5 #go-button.clickable意味着目标是id="go-button"class="clickable"这是一个H5内侧和H5是与一个元件内部id="go-button"

  • 尽量只把cursor: pointer第一rulest #go-button

  • 删除#go-button h5 #go-button.clickable

  • 不需要z-index:999!important要么

片段

#go-button { 
 
    font: 200 14px'Helvetica Neue', Helvetica, Arial, sans-serif; 
 
    border-radius: 6px; 
 
    height: 64px; 
 
    text-decoration: none; 
 
    width: 100%; 
 
    margin-top: 20px; 
 
    background-color: #fc4747; 
 
    padding: 12px; 
 
    border: 0; 
 
    color: #fff; 
 
    cursor: pointer; 
 
} 
 
#go-button h5 { 
 
    font-size: 16px; 
 
    font-weight: 200; 
 
} 
 
#try-now-button:hover, 
 
#go-button:hover { 
 
    text-decoration: none; 
 
    background-color: #ff8282; 
 
}
<div class="row"> 
 
    <div class="col-sm-12"> 
 
    <div id="go-button" class="with-border clickable" href="#find-vegan-products-page"> 
 
     <h5 class=" text-center medium-text">GO</h5> 
 
    </div> 
 
    </div> 
 
</div>