如何解决不可思议的字体图标无法点击反应
我正在尝试通过社交媒体链接实现超棒的图标,但是由于不确定的原因,图标不可单击,并且无法响应转换。关于如何解决它的任何想法?
这是codeandox中的项目: https://codesandbox.io/s/under-construction-7g68z
解决方法
问题出在您的#outerCraneContainer
样式中,它们覆盖了整个页面(包括链接),这就是为什么您不能按下任何链接的原因。
尝试将#outerCraneContainer
的高度设置为height: 200px;
,而不是100%
。
您有div
,其ID为outerCraneContainer
,该ID显示在您的图标上,因此可以防止点击。
解决方案:从app.css中删除position: absolute;
,
#outerCraneContainer {
position: absolute; //remove this
width: 100%;
height: 100%;
bottom: 0;
overflow: hidden;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
box-shadow: inset 0 -60px 0 -30px #ff6347;
}
,
您只需为#outerCraneContainer赋予z-index:-1
#outerCraneContainer {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
overflow: hidden;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
box-shadow: inset 0 -60px 0 -30px #ff6347;
z-index:-1;
}
将其推到其他元素之后
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。