<a> 标签显示为链接，但不可点击答案

【问题标题】：<a> tag showing as link but it is not clickable<a> 标签显示为链接，但不可点击
【发布时间】：2017-01-13 14:58:07
【问题描述】：

我正在尝试仅使用 HTML 和 CSS 创建一个简单的滚动按钮（JS 稍后会启用视差（这不是问题））。但至少在 Firefox 和 Google Chrome 中查看时，该链接具有链接的视觉特征，但光标悬停在其上方时不会改变。我试图搜索谷歌，但我没有找到任何东西；到目前为止，这有任何帮助。

这是我目前的代码：

HTML

<!DOCTYPE html> 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, intial-scale=1"> <!--required for mobile responsivenss-->

<title>Zac Steele Photography</title>

    <link rel="stylesheet" href="style.css" type="text/css"> <!--CSS Stylesheet-->
    <link rel="stylesheet" href="css/jquery.bxslider.css"> <!--jQuery plugin for BX Slider-->
    <link rel="stylesheet" href="css/font-awesome.min.css"> <!--plugin for fonts/icons-->
    <link rel="shortcut icon" href="img/#" type="image/png"> <!--Required for icon in <title>-->
</head>

<body>
    <script src="js/jquery-1.11.2.min.js"></script>
    <script src="js/jquery.bxslider.min.js"></script> <!--Slider Plugin-->

<!--start of navbar-->

<header>
    <div class="header-inner">
            <a href="index.html" id="logo"></a>
        <nav>
            <a href="img/nav.png" id="nav-icon"></a>
            <ul>
                <li><a href="index.html" class="current">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#prints">Prints</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </div>
</header>

<div class="clearfix"></div>

<!--end of navbar-->

<div class="clearfix"></div>

<!--start of main-parallax section-->

<section class="main-parallax" style="height: 100%; position: relative;">
    <div class="main-parallax-inner">
        <img src="#" alt="">
        <h1>I am Zac Steele</h1>
        <h1>This is my portfolio.</h1>
        <a id="scrollbtn" href="#about">Scroll</a>
    </div>
    </div>
</section>

<!--end of main-parallax section-->

<div class="clearfix"></div>

<!--start of about section-->

<div class="about-wrapper">
    <h1>About</h1>
<section class="about-parallax">
    <div class="about-parallax-inner">
        <img src="#" id="aboutBack" alt="">
        <img src="#" alt="portrait of me">
        <p>Lorem ipsum dolo
        r sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</section>
</div>

<!--end of about section-->

<div class="clearfix"></div>

<!--start of portfolio section-->

<div class="portfolio-wrapper">
    <h1>Portfolio</h1>
<section class="portfolio-parallax">
    <div class="portfolio-parallax-inner">
        <img src="#" id="portfolioBack" alt="">
        <div class="row1">
            <img src="#" alt="1">
            <img src="#" alt="2">
            <img src="#" alt="3">
        </div>
        <div class="row2">
            <img src="#" alt="4">
            <img src="#" alt="5">
            <img src="#" alt="6">
        </div>
    </div>
</section>
</div>

<!--end of portfolio section-->

<div class="clearfix"></div>

<!--start of prints section-->
<div class="prints-wrapper">
    <h1>Prints</h1>
<section class="prints-parallax">
    <div class="prints-parallax-inner">
        <img src="#" id="printsBack" alt="">
        <div class="row1">
            <img src="#" alt="1">
            <img src="#" alt="2">
            <img src="#" alt="3">
        </div>
        <div class="row2">
            <img src="#" alt="4">
            <img src="#" alt="5">
            <img src="#" alt="6">
        </div>
    </div>
</section>
</div>

<!--end of prints section-->

<div class="clearfix"></div>

<!--Start one-third section-->

<div id="one-third-wrapper">
    <h1>Full Width Heading Title Section</h1>
    <section class="one-third">
        <img src="https://www.w3newbie.com/wp-content/uploads/beach-camera.png">
        <h3>Heading Title Text</h3>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
    </section>
    <section class="one-third">
        <img src="https://www.w3newbie.com/wp-content/uploads/girl-camera.png">
        <h3>Heading Title Text</h3>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
    </section>
    <section class="one-third">
        <img src="https://www.w3newbie.com/wp-content/uploads/girl-beach.png">
        <h3>Heading Title Text</h3>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
    </section>
</div>

<!--End one-third section-->

<div class="clearfix"></div>

<!--start of contact section-->
<div class="contact-wrapper">
    <h1>Contact</h1>
<section class="contact-parallax">
    <div class="contact-parallax-inner">

    </div>
</section>
</div>

<!--end of contact section-->

<!--start social footer-->

<footer>
    <ul class="social">
        <li><a href="https://www.facebook.com" target="_blank"><i class="fa fa-facebook"></i></a></li>
        <li><a href="https://plus.google.com" target="_blank"><i class="fa fa-google-plus"></i></a></li>
        <li><a href="https://www.twitter.com" target="_blank"><i class="fa fa-twitter"></i></a></li>
        <li><a href="https://www.youtube.com" target="_blank"><i class="fa fa-youtube"></i></a></li>
        <li><a href="https://www.instagram.com/" target="_blank"><i class="fa fa-instagram"></i></a></li>
    </ul>
</footer>

<!--end social footer-->

<!--start socket footer-->

<footer>
  <p style="text-align: center;">&copy; Zac Steele. MMXVII.</p>
</footer>

<!--end socket footer-->

</body>
</html>

CSS：

@import url('https://fonts.googleapis.com/css?family=Montserrat');

* {
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    font-family: sans-serif;
    color: #4D4D4D;
    text-align: center;
    position: relative;
}

h1 {
    font-size: 500%;
    letter-spacing: -1px;
    text-align: center;
    color: #4D4D4D;
    text-transform:;
}

img {
    height: auto;
    margin-bottom: 0px;
}

header {
    background-color: #4D4D4D;
    height: 86px;
    width: 100%;
    opacity: transparent;

}

#header-inner {
    max-width: 1200px;
    margin: 0 auto;
}

#logo {
    float: left;
    width: 200px;
    height: 65px;
    margin: 10px;
    background: url(https://placehold.it/100x100) no-repeat center;
}

nav {
    float: right;
    width: 50%;
    margin: 2% 0;
}

ul {
    list-style: none;
}

nav ul li {
    font-family: sans-serif;
    font-size: 18px;
    display: inline;
    padding: 0 30px;
}

nav ul li a {
    color: #FFF;
    text-decoration: none;

}

nav ul li:hover a {
    color: #63D1F4;
}

.current {
    color: #C3D7DF;
}

/* end of navbar */

/* start of main parallax */

.main-parallax {
    background: url() no-repeat;
    background-size: contain !important;
    position: fixed;
    width: 100%
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    margin: 0;
}

.main-parallax-inner {
    padding-top: 180px;
    padding-bottom: 300px;
}

#scrollbtn {
    cursor: pointer;
}

我写代码的时间不长，所以请放轻松。你们男孩/女孩可以贡献的任何东西都会很棒。

【问题讨论】：

您有一些 z-index 问题。一个突出的是 .main-parallax，它的 z-index 为 -1
</div> </section> 关闭 div 没有打开 div。将其放入代码编辑器中，您将自己看到，HTML 源代码也会显示给您。
干杯蒂姆 - 非常愚蠢的错误。除此之外，您对代码还有什么要更改的吗？
您还缺少 <div class="about-wrapper"> 或 <div class="about-parallax-inner"> 的结束 div
@TimBarnett 你愿意发布你的答案吗？

标签： html css

【解决方案1】：

在你的 CSS 中：

.main-parallax {
z-index: -1;
}

应替换为：

.main-parallax {
z-index: 1;
}

这样，您的锚点就可以点击了！

PS : 你可以抹掉这个，没用 :

#scrollbtn {
    cursor: pointer;
}

【讨论】：

已经没了！哈哈。我将其更改为 z-index: 0;一切都很好。不过感谢您的回答。