超鏈接無法處理圖像

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 ，並用你a元素包裝該div 。

2）Nix你的DOM中的img元素，而不是使它成為div的background-image （在CSS中）。 然后用你a元素包裝div 。

Answer 3

我終於設法找到了解決這個問題的方法。 我想感謝大家的答案和建議，如果沒有這個，我可能永遠都找不到這個解決方案。 上一個div的z-index設置是我必須解決的問題。

基本上我創建了另一個div標簽來包含我的大菜單按鈕並將其放在前一個div的外面，該div保存我的滑塊圖像，該圖像設置在z-index -1，因為我希望我的圖像位於上方的投影背后。 然后，這允許圖像上的鏈接起作用。

希望這有意義並幫助其他有此問題的人。