英雄链接不可点击（不工作）

Question

我正处于一个网站的基本HTML模型的中间，我添加了一个可点击的按钮链接到英雄区....当我鼠标悬停在按钮上，我的鼠标不会改为手或什么，也是不可点击的。但是我能够在CSS中引用标记。救命！洛尔

    <div id="hero">
           <div id="herolink">
               <div class="holder">
                   <p>FRIENDS THAT TRAVEL TOGETHER STAY TOGETHER</p>
                   <a href="www.google.com" class="link">THE LINK</a>
               </div>

           </div>
    </div>

还悬停部分Css没有响应：

a.link {
    border-style: solid;
    border-width: 2px;
    text-decoration: none;
    color: white;
    padding: 3px;
    padding-left: 93px;
    padding-right: 111px;
}



a.link:hover {
    background-color: orange;
}

Answer 1

我能看到的是z-index问题。将<a> relative定位并将其置于上方：

a.link {
  border-style: solid;
  border-width: 2px;
  text-decoration: none;
  color: white;
  padding: 3px;
  padding-left: 93px;
  padding-right: 111px;
  position: relative;
  z-index: 100000;
}