我正在尝试仅使用 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;">© 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;
}
我编写代码的时间不长，请放轻松。你们可以贡献的任何东西都很棒。
最佳答案
在你的 CSS 中:
.main-parallax {
z-index: -1;
}
应替换为:
.main-parallax {
z-index: 1;
}
这样，您的 anchor 就可以点击了!
PS:你可以删除这个，它没有用:
#scrollbtn {
cursor: pointer;
}
关于html - <a> 标签显示为链接但不可点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41637420/