超链接不适用于图像

Posted 2023-03-05

【中文标题】超链接不适用于图像

【英文标题】：Hyperlinks not working on images

【发布时间】：2014-08-11 18:51:43

【问题描述】：

我在这里上传了我的页面，以便您可以清楚地看到我所指的内容：

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

菜单部分很好用，它是底部较大的按钮图标：投资组合、联系和关于我。

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

<div class="largemenubutton"><a href="portfolio.html"><img src="images/portfolio.png"  border="0" /></a></div>
    <div class="largemenubutton"><a href="contact.html"><img src="images/getintouch.png"  border="0" /></a></div>
    <div class="largemenubutton"><a href="aboutme.html"><img src="images/aboutme.png"  border="0" /></a></div>

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

【问题讨论】：

不仅仅是链接，为什么不是代码

右键 - 查看源代码 - 都在那里 :)

只需删除类主图像上的 z-index

@user3714234 - 这个想法是，问题应该能够帮助未来的访问者，而不仅仅是你。一旦它在您的网站上得到修复，这个问题就没有任何意义了。

@user3714234 - 你应该让帮助你的人更容易

【参考方案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/

【讨论】：

这确实有我所追求的效果。我希望我的滚动图像位于投影下方？另外，为什么 z-index 会影响超链接？

因为如果你把 z-index: -1 那个 div 放在 parent 后面，所以它在它后面，所以鼠标不能选择链接。尝试使用 chrome 开发工具检查链接，您会看到选择了主 div 而不是链接。

【参考方案2】：

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

基本上，我创建了另一个 div 标签来包含我的大菜单按钮，并将其放置在前一个 div 之外，该 div 包含我的滑块图像，该图像设置为 z-index -1，因为我希望我的图像位于上方的阴影后面。然后，图像上的链接就可以工作了。

希望这是有道理的，并且可以帮助遇到此问题的其他人。

【参考方案3】：

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

1) 将 img 元素包裹在 div 中，然后将 div 包裹在 a 元素中。

2) Nix 从你的 DOM 中删除 img 元素，并将其改为 background-image 或 div （在 CSS 中）。然后用 a 元素包装 div。