Question

I am trying to create a simple scroll button using only HTML and CSS, (JS coming later to enable to parallax (that's not an issue)). But when viewed in Firefox and Google Chrome at least, the link has the visual characteristics of a link but the cursor doesn't alter when hovered above it. I have tried to search Google but I haven't located anything; thus far that has been of any help.

Here is the code I have so far:

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;
}

I haven't been coding too long so take it easy on me. Anything that you guys/girls can contribute would be awesome.

Answer 1

在你的CSS中：

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

应替换为：

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

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

PS：你可以删除它，它没用：

#scrollbtn {
    cursor: pointer;
}

<a> tag showing as link but it is not clickable

1 个答案: