CSS 左侧按钮不可点击

Question

通过查看这个 post 我已经成功了 75%：How Do I Make a CSS Button Clickable

但是如果光标出现在左侧，按钮仍然不可点击。

HTML

<a href="http://www.christianfordlive.com/buy-tickets/"><span class="buy">Buy Tickets Now</span></a>

CSS

 .buy {
  float: left;
  position: relative;
  display: block;
  width: 200px;
  height: 27px;
  text-align: center;
  margin-left: -70px;
  margin-top: 30px;
  font-family: Calibri,Helvetica, sans serif;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  background-color: #39b54a;
  -moz-border-radius: 15px;
  border-radius: 15px;
  padding: 15px;

}
.buy:hover {
  background-color: #8dc63f;
}

有人可以帮助解决我的错误吗？ http://christianfordlive.com

Answer 1

问题是由 div mainImage 和 left margin 产生的。 div 主页在你的按钮前面，这就是你不能点击它的原因。

您有两个简单的选项来修复错误：

1 - 删除按钮的左边距

margin-left: 0px;

如果您这样做，div mainImage 将停止与您的 span 重叠。

您还可以修改按钮的 z-index 以强制它转到主图像的前面 div。例如，只需将其添加到您的 .buy class:

z-index: 1000;

两种选择都应该可以解决您的问题

Answer 2

首先，您的代码有点乱，而且您在同一规则内否决了属性。您只需要：

html:

<a class="buy" href="http://www.christianfordlive.com/buy-tickets/">Buy Tickets Now</a>

css:

.buy {
  float: left;
  position: relative;
  font-family: Calibri,Helvetica, sans serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border-radius: 15px;
  background-color: #39b54a;
  padding: 15px 40px;
  margin-top: 30px;
  z-index: 100;
}

CSS 左侧按钮不可点击

CSS button not clickable on left

css

button