字体超棒的图标不可点击（反应）

Question

我正在尝试使用社交媒体链接实现字体超棒的图标，但由于不确定的原因，图标不可点击且不响应转换。关于如何修复它有什么想法吗？

这是codesandox中的项目： https://codesandbox.io/s/under-construction-7g68z

Answer 1

问题出在您的 #outerCraneContainer 样式中，它们覆盖了整个页面（包括 links），这就是为什么您无法按任何 link.

尝试将 #outerCraneContainer 高度设置为 height: 200px; 而不是 100%。

Answer 2

你有 div 和 id outerCraneContainer，它显示在你的图标上，从而防止它们被点击。

解决方案：从

下的 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;
}

Answer 3

你可以给#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 icon not clickable (React)

font-awesome

reactjs