CODEWITHSUNDEEP
htmlcss
BeniaminoBaggins
BeniaminoBaggins

Reputation: 12433

cursor: pointer; css not working

Why is the #go-button div not showing the cursor as being "pointer"?

Here is the 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>

Here is the 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;
    }

Upvotes: 1

Views: 9300

Answers (1)

zer00ne
zer00ne

Reputation: 43910

#go-button h5 #go-button.clickable means that the target is id="go-button" with class="clickable" that's inside a H5 and the H5 is inside an element with the id="go-button".

  • Try just placing cursor: pointer in the first rulest #go-button

  • Remove #go-button h5 #go-button.clickable

  • Don't need z-index:999 or !important either

Snippet

#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>

Upvotes: 5

Related Questions