向下箭头单击不起作用的波纹环动画

Question

我有一个向下的箭头与周围的连锁反应环。向下箭头单击不能与其周围的环一起使用，但如果我取下环，则点击功能正常工作。

这是网页：https://rimildeyjsr.github.io/St.Anthony-Website/

任何想法如何解决呢？

CSS：

body{ 
background: red; 
} 
.down-arrow { 
    display: none; 
    position: absolute; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    top: 50%; 
    z-index: 5; 
    border-radius: 50%; 
    height: 80px; 
    width: 80px; 
} 
.ring { 
    border: 2.5px solid white; 
    -webkit-border-radius: 50%; 
    height: 80px; 
    width: 80px; 
    position: absolute; 
    left:0; 
    right: 0; 
    top:50%; 
    z-index: 5; 
    margin: 0 auto; 
    -webkit-animation: pulsate 2s ease-out; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-delay: 2s; 
    opacity: 0.0; 
} 
.ring2 { 
    -webkit-animation-delay: 1.4s; 
} 
@-webkit-keyframes pulsate { 
    0% {-webkit-transform: scale(0,0); opacity: 1;} 
    100% {-webkit-transform: scale(1.2,1.2); opacity: 0;} 
} 

HTML：

<img src="images/down-arrow.png" alt="down arrow for navigation" class="img-responsive down-arrow animated slideInDown"> 
<div class="ring"></div> 
<div class="ring ring2"></div> 

Answer 1

添加z-index一些较高的值将解决这个问题

body{ 
 
background: red; 
 
} 
 
.down-arrow {/* 
 
    display: none;*/ 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0 auto; 
 
    top: 50%; 
 
    z-index: 15; 
 
    border-radius: 50%; 
 
    height: 80px; 
 
    width: 80px; 
 
} 
 
.ring { 
 
    border: 2.5px solid white; 
 
    -webkit-border-radius: 50%; 
 
    height: 80px; 
 
    width: 80px; 
 
    position: absolute; 
 
    left:0; 
 
    right: 0; 
 
    top:50%; 
 
    z-index: 5; 
 
    margin: 0 auto; 
 
    -webkit-animation: pulsate 2s ease-out; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-delay: 2s; 
 
    opacity: 0.0; 
 
} 
 
.ring2 { 
 
    -webkit-animation-delay: 1.4s; 
 
} 
 
@-webkit-keyframes pulsate { 
 
    0% {-webkit-transform: scale(0,0); opacity: 1;} 
 
    100% {-webkit-transform: scale(1.2,1.2); opacity: 0;} 
 
}

<img src="images/down-arrow.png" alt="down arrow for navigation" class="img-responsive down-arrow animated slideInDown"> 
 
<div class="ring"></div> 
 
<div class="ring ring2"></div>

Credit to @nevermind