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

这是代表或多或少的小提琴：http://jsfiddle.net/9q7PX/

Answer 2

我想到了两种可能的解决方案：

1）将img元素换行div，并将div与a元素包装在一起。

2）Nix来自您的DOM中的img元素，而是将其设为background-image div（在CSS中）。然后用div元素包裹a。

Answer 3

我终于设法找到了解决这个问题的方法。我想感谢大家的答案和建议，如果没有这个，我可能永远都找不到这个解决方案。上一个div的z-index设置是我必须解决的问题。

基本上我创建了另一个div标签来包含我的大菜单按钮并将其放在前一个div的外面，该div保存了我的滑块图像，该图像设置在z-index -1，因为我希望我的图像位于上方的投影背后。然后，这允许图像上的链接起作用。

希望这有意义并帮助其他有此问题的人。

超链接无法处理图像

3 个答案: