不可思议的字体图标无法点击反应

问题描述

我正在尝试通过社交媒体链接实现超棒的图标，但是由于不确定的原因，图标不可单击，并且无法响应转换。关于如何解决它的任何想法？

这是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; 
}

将其推到其他元素之后

font-awesome reactjs reactjs