html - 超链接不适用于图像

Question

我在这里上传了我的页面，这样你就可以清楚地看到我指的是什么:

http://www.emmasteed.co.uk/new/

菜单部分工作正常，它是底部较大的按钮图标:投资组合、取得联系和关于我。

如您将在代码中看到的那样，我已经为这些图像建立了超链接，但是当我将鼠标悬停在它们上方或尝试单击时没有任何反应。我究竟做错了什么？这让我发疯!

<div class="largemenubutton"><a href="portfolio.html"><img src="images/portfolio.png" alt="Portfolio" border="0" /></a></div>
    <div class="largemenubutton"><a href="contact.html"><img src="images/getintouch.png" alt="Contact me!" border="0" /></a></div>
    <div class="largemenubutton"><a href="aboutme.html"><img src="images/aboutme.png" alt="About" border="0" /></a></div>

.largemenubutton {
    width:283px;
    height:259px;
    margin-top:20px;
    float:left;
    display:block;
    text-align:center;
}

Answer 1

删除那里的 z-index -1:

.mainimage {
  z-index: -1;
}

要保持阴影，请执行以下操作:

<div class="header">
  <div class="container">

移除 mainhome 宽度并应用于 css 中的容器:

.container {
  width: 850px;
}

同样使用该容器来包装网站的主要内容。

然后是投影(根据需要自定义):

.header {
   box-shadow: 0 0 0 10px black;
}

这是或多或少代表这个的 fiddle :http://jsfiddle.net/9q7PX/