Question

为什么#go-button div没有将光标显示为“指针”？

这是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;
    }

Answer 1

#go-button h5 #go-button.clickable表示目标为id="go-button"，class="clickable"位于H5内且H5位于id="go-button"的元素内{1}}。

尝试将cursor: pointer放入第一个规则#go-button
删除#go-button h5 #go-button.clickable
不需要z-index:999或!important

<强>段

＆＃13;

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

＆＃13;

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

＆＃13;

游标：指针; css不工作

1 个答案: