我遇到了这个问题:我制作了一个向下箭头的动画，并将其放在导航栏中的“登录”下方，但似乎当动画接近“登录”时，我无法按下，就像它以某种方式阻止了它，有没有办法解决这个问题？还是我应该删除动画？
body{
margin: 0;
padding: 0;
background: white;
}
.circle {
position: absolute;
top: 10%;
left: 83.5%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
text-align: center;
line-height: 110px;
color: white;
font-size: 30px;
overflow: hidden;
color: yellow;
}
.circle {
margin: 0;
padding: 0;
animation: animate 1s infinite;
right: 0;
}
@keyframes animate {
50%{
transform: translateX(-50px);
margin-top: -30px;
}<body>
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li><a href="#">INICIO</a></li>
<li><a href="#">CONTACTO</a></li>
<li><a href="#">REGISTRATE</a></li>
<li><a href="#">INGRESAR</a></li>
<div class="circle">
<i class="fas fa-angle-down"></i>
</ul>
</div>
</nav>
</header>
</body>最佳答案
看起来你可以使用 CSS pointer-events
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
如果您为 css 元素设置 pointer-events:none;，它不会阻止它覆盖的链接。
例子:
.circle{
pointer-events: none;
}
关于javascript - 图标动画禁用我的导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49142929/