1
我有幾個圖像作爲社交媒體鏈接工作。我添加了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;
}