parallax.js - 链接不可点击且光标:指针不工作
parallax.js - links not clickable and cursor : pointer not working
我有一些图片作为社交媒体链接。我加了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;
}
最 class .fullpage-wrapper 的父级有指针事件:none 防止锚元素的默认行为。
您可以 运行 通过您的 js 代码删除它,或者您可以在 css 中添加以下内容,这允许鼠标事件。
.layer {
pointer-events: auto;
}
我有一些图片作为社交媒体链接。我加了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;
}
最 class .fullpage-wrapper 的父级有指针事件:none 防止锚元素的默认行为。
您可以 运行 通过您的 js 代码删除它,或者您可以在 css 中添加以下内容,这允许鼠标事件。
.layer {
pointer-events: auto;
}