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

问题描述：

我有几个图像作为社交媒体链接工作。我添加了parallax.js（http://wagerfield.github.io/parallax/）添加视差效果，之后，我无法点击我的链接。我还添加了cursor:pointer，它在链接上悬停时不工作。我试图玩position:relative和z-index，但我无法解决这个错误。parallax.js - 链接不可点击和光标：指针不工作

在此先感谢您的帮助。

有问题的部分，在右下角的社交媒体链接无法点击 - 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/[email protected]" class="social-img svg-size"> 
          </a> 
          <a href="https://github.com/hackertronix"> 
           <img src="images/[email protected]" class="social-img svg-size"> 
          </a> 
          <a href="mailto:[email protected]"> 
           <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; 
}

答

父类最.fullpage-包装具有指针事件：没有阻止锚元素的默认行为。

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

.layer { 
    pointer-events: auto; 
}

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

相关推荐