为什么 <a>/href 标签不起作用？我的本地机器上有文件答案

【问题标题】：Why is <a>/href tag not functioning? I have the file on my local machine为什么 <a>/href 标签不起作用？我的本地机器上有文件
【发布时间】：2020-10-24 16:22:43
【问题描述】：

我不明白为什么当我将鼠标悬停在我的徽标上时，它没有链接到着陆页。

HTML：

<body>
  <header>
    <a href="landing.html">
       <img src="img/typeface.png" alt="logo" class="headerlogo">
    </a>
  </header>
 <img src="img/wave.png" alt="wave" draggable="false" class="wave">
</body>

CSS：

body {
 margin: 0;
 padding: 0;
 background-color: #121420;
 font-family: 'Montserrat', sans-serif;
}

header {
 display: flex;
}

.headerlogo {
 width: 10%;
 height: 55%;
 margin-left: 5%;
 padding-top: 35px;
}

.wave {
 position: absolute;
 width: 100%;
 bottom: 0;
 left: 0;
}

我看到其他帖子说 z-index 是问题，但我的 css 中没有 z-index。

【问题讨论】：

标签： html css hyperlink tags href

【解决方案1】：

我相信我发现了波浪图像在技术上位于整个页面顶部的问题，尽管它是透明的，使我无法点击网站上的任何地方。

我通过将 z-index: -1 应用于波形图像解决了这个问题。

【讨论】：

【解决方案2】：

在 JSfiddle 中运行你的代码，它工作得很好（我交换了图像）：https://jsfiddle.net/8e0j62zw/

你的意思是当你点击链接时它不会去任何地方？只是给你另一个空白页，或者找不到错误。

如果是这样，您可能需要检查指向 landing.html 的链接上的路径

这似乎是一个基于文件位置的相对路径，可能会导致文件中断。您可以在此处阅读有关路径链接的信息：https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/

【讨论】：

很奇怪，将链接更改为“https://www.twitter.com”没有任何区别，我仍然无法单击徽标。似乎无法获得带有光标的图像，但是当我将鼠标悬停在它上面时，它似乎不可点击，并且当我点击时什么也不做。
你能像我一样制作一个 JS fiddle 并将你的代码粘贴到其中吗？使用您正在使用的徽标（您必须将其上传到 imgur 或类似的平台），然后我可以帮助您进行更多调试。除非我能真正看到它并且你使用的是什么，否则我无法根据你的描述做些什么。