左侧的 CSS 按钮不可点击

Question

通过查看这篇文章，我已经成功了 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 ma​​inImage 和 left margin 产生的。 div mainPage 在你的按钮前面，这就是你不能点击它的原因。

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

1 - 移除按钮的 margin-left

margin-left: 0px;

如果你这样做，div mainImage 将停止与你的跨度重叠。

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

z-index: 1000;

这两个选项都应该可以解决您的问题