问题描述
我正在尝试通过社交媒体链接实现超棒的图标,但是由于不确定的原因,图标不可单击,并且无法响应转换。关于如何解决它的任何想法?
这是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;
}
将其推到其他元素之后