Question

我有一些图片作为社交媒体链接。我添加了parallax.js（http://wagerfield.github.io/parallax/）来添加视差效果，之后，我无法点击我的链接。我还添加了cursor:pointer，它在链接上悬停时无法正常工作。我试图使用position:relative和z-index，但我无法解决错误。

提前感谢您的帮助。

相关部分，右下方的社交媒体链接无法点击 - https://rimildeyjsr.github.io/spotify-circle-animation/#contact

HTML

<div class="section" id="section4">
        <h1>Contact</h1>

        <div class="group layer container-4" data-depth="0.8">
            <div class="left">
                <h3>Cheerio !</h3>
                <img src="images/emoji.png" alt="smiley with sunglasses" class="smiley">
            </div>
            <div class="right">
                <div class="group">
                    <div class="left-small">
                        <div class="rectangle"></div>
                    </div>
                    <div class="right-large">
                        <p>Hey, thanks for visiting my website.<br>
                            If you want to get in touch with<br>
                            me, shoot me an email or a<br>
                            tweet. I’m fun to talk to <br>
                            (seriously)
                        </p>
                        <div>
                            <a href="https://twitter.com/hackertronix">
                                <img src="images/fill-1.svg" class="social-img twitter-img">
                            </a>
                            <a href="https://dribbble.com/hackertronix">
                                <img src="images/dribbble-logo-preview@3x.png" class="social-img svg-size">
                            </a>
                            <a href="https://github.com/hackertronix">
                                <img src="images/git-hub-mark@3x.png" class="social-img svg-size">
                            </a>
                            <a href="mailto:hello@hackertronix.com">
                                <img src="images/shape.svg" class="social-img">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layer" id="circle-wrapper-1-4" data-depth="0.6"></div>
        <div class="layer" id="circle-wrapper-2-4" data-depth="0.5"></div>
        <div class="layer" id="circle-wrapper-3-4" data-depth="0.4"></div>
    </div>

CSS：

.container-4 {
    position: relative;
    z-index: 20;
    top: 9% !important;
    left: 0 !important;
    width: 100vw;
    height: 100vh;
}

#circle-wrapper-1-4,
#circle-wrapper-2-4,
#circle-wrapper-3-4
{
    position: absolute;
    width: 100vw;
    height: 100vh;
}

#circle-wrapper-1-4
{
    z-index: 15;
}

#circle-wrapper-2-4{
    z-index: 10;
}

#circle-wrapper-3-4{
    z-index: 5;
}

#section4 h1,#section4 h3, #section4 p {
    position: relative;
    z-index: 20;
    display: block;
    text-align: left;
    top: 5%;
    left: 8%;
    color: #FFFFFF;
}

#section4 h1,#section3 h1 {
    margin: 0;
    top: 3.5%;
    font-family: Graphik, Roboto;
    font-weight: 600;
}


.left {
    float: left;
    width: 49%;
    opacity: 0;
    position: relative;
    z-index: 20;
}

.right {
    float: right;
    width: 51%;
    position: relative;
    z-index: 20;
}

.right-large {
    float: right;
    width: 90%;
    opacity: 0;
    position: relative;
    z-index: 20;
}

.left-small {
    float: left;
    width: 10%;
    position: relative;
    z-index: 20;
}

.group:after {
    content:"";
    display: table;
    clear: both;
}

#section4 h3 {
    font-family: Graphik, Roboto;
    color: white;
    font-size: 6em;
    margin: 29% 0 7%;
}

#section4 img {
    position: relative;
    z-index: 20;
}

.smiley {
    height: 180px;
    width: auto;
    margin: 0 22%;
}

#section4 p {
    font-family: Graphik-Regular, Roboto;
    color: white;
    font-size: 2em;
    margin: 15% auto;
    line-height: 1.55em;
    position: relative;
    z-index: 20;
}

.social-img {
    height: 4%;
    width: auto;
    margin: 0 63px 0 0;
    position: relative;
    z-index: 20;
    cursor: pointer;
}

.svg-size {
    height: 53px;
}

.twitter-img {
    margin-left: 8%;
}

.rectangle {
    width: 12px;
    height: 600px;
    border-radius: 100px;
    background-color: #ffffff;
    margin-top: 50%;
    position: relative;
    z-index: 20;
}

Answer 1

父类最多.fullpage-wrapper有pointer-events：none，它会阻止anchor元素的默认行为。

你可以运行你的js代码并删除它，或者你可以在css中添加以下内容，它允许鼠标事件。

.layer {
   pointer-events: auto;
}

parallax.js - 链接不可点击和光标：指针不工作

1 个答案: