2016-03-13 2 views
1

Почему поле #go-button не показывает курсор как «указатель»?курсор: указатель; 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 в первом владычествуешь #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>

Смежные вопросы